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内 容 简 介 


本 书 全 面 介绍 了 HTML5 中 的 标签 .HTML5 数据 存储 ,定位 和 离线 应 用 ,CSS3 的 基础 知识 以 及 
jQuery Mobile.sencha-touch 和 PhoneGap 三 个 框架 ,重点 介绍 了 HTML5 和 CSS3 在 开始 移动 Web 中 的 应 
用 ,并 通过 相应 的 例子 来 阐述 如 何 使 用 相关 的 知识 来 开发 移动 Web 程序 。 

全 书 共 分 8 章 : 第 1 章 为 移动 Web 开发 技术 概论 ,主要 介绍 移动 Web 的 发 展 历程 ,包括 移动 Web 和 
桌面 Web 的 区 别 : 第 2 一 4 章 为 HTML5 的 知识 内 容 , 着 重 讨论 HTML5 的 标签 和 数据 存储 、 定 位 和 离线 
应 用 ; 第 5 章 为 CSS3 的 知识 ,重点 介绍 CSS3 在 移动 Web 开发 中 的 应 用 ; 第 6 一 8 章 为 jQuery Mobile, 
sencha-touch 和 PhoneGap 框架 的 知识 内 容 , 重 点 介绍 如 何 利用 它们 开发 跨 平 台 的 移动 Web 程序 。 全 书 提 
供 了 大 量 应 用 实例 ,可 以 让 读者 快速 掌握 开发 要 点 。 

本 书 适合 作为 高 等 职业 技术 院 校 ,普通 高 等 院 校 计算 机 、 计 算 机 专业 、 电 子 商务 专业 高 年 级 专科 生 、 本 
科 生 的 教材 ,同时 可 供 对 移动 Web 开发 感 兴趣 的 开发 人 员 、 广 大 科技 工作 者 和 研究 人 员 参 考 。 
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随 着 我 国 高 等 教育 规模 的 扩大 以 及 产业 结构 调整 的 进一步 完善 ,社会 对 高 层次 应 用 型 
人 才 的 需求 将 更 加 迫切 。 各 地 高 校 紧 密 结合 地 方 经 济 建设 发 展 需要 ,科学 运用 市 场 调节 机 
制 , 合 理 调整 和 配置 教育 资源 ,在 改革 和 改造 传统 学 科 专 业 的 基础 上 ,加 强 工 程 型 和 应 用 型 
学 科 专 业 建 设 , 积 极 设置 主要 面向 地 方 支柱 产业 ,高 新 技术 产业 .服务 业 的 工程 型 和 应 用 型 
学 科 专 业 , 积 极为 地 方 经 济 建 设 输 送 各 类 应 用 型 人 才 。 各 高 校 加 大 了 使 用 信息 科学 等 现代 
科学 技术 提升 改造 传统 学 科 专 业 的 力度 ,从 而 实现 传统 学 科 专 业 向 工程 型 和 应 用 型 学 科 专 
业 的 发 展 与 转变 。 在 发 挥 传统 学 科 专 业 师 资 力量 强 、 办 学 经 验 丰 富 .教学 资源 充裕 等 优势 的 
同时 ,不断 更 新 教学 内 容 改革 课程 体系 ,使 工程 型 和 应 用 型 学 科 专 业 教育 与 经 济 建设 相 适 
应 。 计 算 机 课程 教学 在 从 传统 学 科 向 工程 型 和 应 用 型 学 科 转 变 中 起 着 至 关 重 要 的 作用 , 工 
程 型 和 应 用 型 学 科 专 业 中 的 计算 机 课程 设置 ,内容 体系 和 教学 手段 及 方法 等 也 具有 不 同 于 
传统 学 科 的 鲜明 特点 。 

为 了 配合 高 校 工程 型 和 应 用 型 学 科 专 业 的 建设 和 发 展 ,急需 出 版 一 批 内 容 新 、 体 系 新 、 
方法 新 .手段 新 的 高 水 平 计算 机 课程 教材 。 目 前 ,工程 型 和 应 用 型 学 科 专 业 计算 机 课程 教材 
的 建设 工作 仍 滞后 于 教学 改革 的 实践 ,如 现 有 的 计算 机 教材 中 有 不 少 内 容 陈 旧 ( 依 然 用 传统 
专业 计算 机 教材 代替 工程 型 和 应 用 型 学 科 专 业 教 材 ) , 重 理论 、. 轻 实践 ,不 能 满足 新 的 教学 计 
划 、 课 程 设置 的 需要 ; 一 些 课程 的 教材 可 供 选择 的 品种 太 少 ; 一 些 基 础 课 的 教材 虽然 品种 
较 多 ,但 低 水 平 重复 严重 ; 有 些 教材 内 容 庞杂 , 书 越 编 越 厚 ; 专业 课 教材 、 教 学 辅助 教材 及 
教学 参考 书 短缺 ,等 等 ,都 不 利于 学 生 能 力 的 提高 和 素质 的 培养 。 为 此 ,在 教育 部 相关 教学 
指导 委员 会 专家 的 指导 和 建议 下 ,清华 大 学 出 版 社 组 织 出 版 本 系列 教材 ,以 满足 工程 型 和 应 
用 型 学 科 专业 计算 机 课程 教学 的 需要 。 本 系列 教材 在 规划 过 程 中 体现 了 如 下 一 些 基本 原则 
和 特点 。 

(1) 面向 工程 型 与 应 用 型 学 科 专业 ,强调 计算 机 在 各 专业 中 的 应 用 。 教 材 内 容 坚 持 基 
本 理论 适度 ,反映 基本 理论 和 原理 的 综合 应 用 ,强调 实践 和 应 用 环节 。 

(2) 反映 教学 需要 ,促进 教学 发 展 。 教 材 规划 以 新 的 工程 型 和 应 用 型 专业 目录 为 依据 。 
教材 要 适应 多 样 化 的 教学 需要 ,正确 把 握 教 学 内 容 和 课程 体系 的 改革 方向 ,在 选择 教材 内 容 
和 编写 体系 时 注意 体现 素质 教育 、 创 新 能 力 与 实践 能 力 的 培养 ,为 学 生 知识 、 能 力 、 素 质 协调 
发 展 创造 条 件 。 

G) 实施 精品 战略 ,突出 重点 ,保证 质量 。 规 划 教 材 建设 仍然 把 重点 放 在 公共 基础 课 和 
专业 基础 课 的 教材 建设 上 ; 特别 注意 选择 并 安排 一 部 分 原来 基础 比较 好 的 优秀 教材 或 讲义 
修订 再 版 ,逐步 形成 精品 教材 ; 提倡 并 鼓励 编写 体现 工程 型 和 应 用 型 专业 教学 内 容 和 课程 
体系 改革 成 果 的 教材 。 
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(4) 主张 一 纲 多 本 ,合理 配套 。 基 础 课 和 专业 基础 课 教 材 要 配套 ,同一 门 课程 可 以 有 多 
本 具有 不 同 内 容 特点 的 教材 。 处 理 好 教材 统一 性 与 多 样 化 ,基本 教材 与 辅助 教材 ,教学 参考 
书 ,文字 教材 与 软件 教材 的 关系 ,实现 教材 系列 资源 配套 。 

(5) 依靠 专家 ,择优 选用 。 在 制订 教材 规划 时 要 依靠 各 课程 专家 在 调查 研究 本 课程 教 
材 建设 现状 的 基础 上 提出 规划 选 题 。 在 落实 主编 人 选 时 ,要 引入 竞争 机 制 , 通 过 申报 .评审 
确定 主编 。 书 稿 完成 后 要 认真 实行 审 稿 程序 ,确保 出 书 质 量 。 

繁荣 教材 出 版 事业 ,提高 教材 质量 的 关键 是 教师 。 建 立 一 支 高 水 平 的 以 老 带 新 的 教材 
编写 队伍 才能 保证 教材 的 编写 质量 和 建设 力度 ,希望 有 志 于 教材 建设 的 教师 能 够 加 入 到 我 
们 的 编写 队伍 中 来 。 


21 世纪 高 等 学 校 计 算 机 教育 实用 规划 教材 编 委 会 
联系 人 : 魏 江 江 weijj@tup. tsinghua. edu. cn 
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最 近 几 年 , 随 着 宽带 无 线 移动 通信 技术 的 发 展 ,移动 互联 网 得 到 了 迅速 的 发 展 , 继 计算 
机 、 互 联网 之 后 ,移动 互联 网 正 掀起 第 三 次 信息 技术 革命 的 浪潮 ,IT 业界 的 新 技术 、 新 应 用 
不 断 涌现 , Web 应 用 技术 的 不 断 创 新 ,并 且 已 经 渗透 到 社会 生活 的 方方面面 ,从 而 孕育 了 巨 
大 的 市 场 潜力 和 发 展 机 会 。 

与 此 同时 ,HTML5 和 CSS3 技术 进一步 结合 ,HTML5 首先 强化 了 Web 网 页 的 表现 能 
力 ,其 次 追加 了 本 地 数据 库 等 相关 功能 。 所 谓 的 HTML5 实际 上 是 指 包括 HTML, CSS 和 
JavaScript 在 内 的 一 套 技 术 组 合 ,目前 支持 HTML5 的 主流 浏览 器 有 Google Chrome, 
Firefox IE 9 以 上 版 本 的 浏览 器 。HTML5 新 增 的 视频 .音频 ,画布 .离线 应 用 等 功能 为 移 
动 Web 开发 带 来 了 便利 。 新 技术 不 仅 能 很 好 地 适应 移动 终端 界面 ,而 且 很 大 程度 上 减少 了 
代码 元 余 ,提高 了 移动 设备 运行 效率 。 随 着 HTML5 和 CSS3 的 发 展 , 基 于 HTML5 的 应 用 
在 未 来 更 有 可 能 对 移动 互联 网 领域 产生 巨大 的 影响 。 

正 是 在 此 时 代 背 景 之 下 ,我 们 就 很 有 必要 去 学 习 新 技术 和 新 知识 ,以 适应 时 代 发 展 的 要 
求 ,本 书 重点 介绍 HTML5 和 CSS3 的 新 特性 ,以 及 如 何 利用 jQuery Mobile, sencha-touch 
和 PhoneGap 三 个 移动 Web 开发 框架 去 开发 移动 Web 项 目 。 

本 书 的 适合 人 群 主要 有 : 具有 一 定 技术 基础 的 Web 前端 开发 工程 师 ; 具有 一 定 美工 基 
础 的 UI 设计 师 ; 开设 了 Web 开发 等 相关 专业 的 高 等 职业 技术 院 校 和 相关 的 培训 机 构 的 师 
生 。 此 外 ,也 适合 熟悉 Java、.PHP、ASP. NET 等 后 端 Web 技术 的 开发 者 阅读 。 

本 书 是 配合 广东 行政 职业 学 院 电 子 商务 专业 重点 建设 的 技术 教材 ,在 编写 过 程 中 ,多 位 
老师 付出 了 辛勤 的 劳动 ,并 提出 了 许多 中 肯 的 建议 ,在 此 ,对 参与 编写 的 各 位 老师 表示 诚挚 
的 感谢 。 

另外 ,由 于 时 间 和 水 平 有 限 ,在 本 书 的 编写 过 程 中 可 能 存在 一 些 对 HTML5 等 技术 认 
识 不 全 面 或 者 表述 玻 漏 的 地 方 , 敬 请 读者 批评 和 指正 ,我 们 说 以 最 真诚 的 心 希望 与 读者 共同 
交流 ,共同 成 长 。 


编 者 
2016 年 3 月 
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本 章 学 习 目标 

。 智能 机 的 发 展 过 程 

。 智能 手机 的 Web 浏览 器 
。 HTML5 移动 Web 应 用 


移动 互联 网 在 当前 时 代 得 到 了 快速 的 发 展 ,Android 与 iOS 等 新 技术 在 移动 互联 网 领 
域 成 为 市 场 的 主流 ,市 场 潜力 巨大 ,同时 跨 平台 的 HTML5 应 用 在 未 来 更 有 可 能 对 移动 互 
联网 领域 起 到 巨大 的 影响 。 

本 书 将 主要 介绍 HTML5 的 一 些 新 标准 及 新 特性 ,同时 结合 移动 互联 网 领域 ,将 为 读 
者 带 来 全 新 的 技术 体验 ,甚至 可 以 让 只 有 Web 技术 基础 的 读者 同样 能 参与 移动 互联 网 开 
发 。 在 本 书 中 ,将 学 习 如 何 构建 适应 性 强 、 响 应 迅速 并 且 符合 标准 的 移动 Web 站 点 ,并 确保 
其 可 以 在 任意 移动 浏览 器 上 和 运行。 一 些 简单 的 开发 提示 和 技巧 将 改进 小 尺寸 屏幕 中 的 
Web 可 用 性 ,并 且 可 以 进一步 充实 移动 Web 站 点 ,使 其 适用 于 高 级 智能 手机 浏览 器 (具有 
电子 邮件 .桌面 功能 的 Web 浏览 等 集成 Internet 功能 的 高 端 手机 中 的 浏览 器 ) ,能 够 呈现 完 
整 的 HTML 并 实现 专 有 扩展 。 开 发 工作 完成 后 ,将 了 解 如 何在 实际 移动 设备 上 进行 全 方 
位 的 测试 ,优化 移动 Web 页 面 以 便于 网 络 传输 。 

本 章 首先 介绍 智能 机 的 发 展 过 程 , 再 介绍 智能 手机 的 Web 浏览 器 ,最 后 介绍 智能 手机 
的 Web 浏览 器 以 及 移动 Web 和 桌面 Web 的 区 别 。 


1.1 智能 机 的 发 展 


Android 和 iOS 平台 的 智能 手机 伴随 着 移动 互联 网 的 发 展 ,让 越 来 越 多 的 应 用 程序 在 
其 平台 下 的 软件 市 场 发 布 软件 。 同 时 ,各 家 公司 为 了 使 自己 的 产品 线 能 够 更 快 地 在 移动 互 
联网 上 占有 市 场 份额 ,也 纷纷 将 自己 的 产品 线 布局 到 移动 设备 上 。 因 此 ,移动 互联 网 大 战 一 
触 即 发 。 

1. WAP 1. 0 时代 

实际 上 , 早 在 2000 年 的 时 候 , 移 动 互联 网 已 经 进入 了 人 们 的 生活 ,这 个 时 候 手机 所 提供 
的 功能 有 限 ,基本 上 都 是 只 提供 铃声 .彩铃 .图 片 等 服务 内 容 。 这 种 服务 使 相当 一 部 分 创业 
者 在 短期 内 得 到 可 观 的 收入 ,这 个 时 代 通 常 被 称 为 SP 时 代 。 但 是 ,这 种 服务 只 能 满足 部 分 
手机 用 户 的 低层 次 需求 。 
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2. WAP 2. 0 时 代 

直到 2006 年 ,智能 手机 得 到 不 断 发 展 , 手 机 用 户 的 需求 开始 产生 变化 ,各 种 新 的 手机 应 
用 不 断 推出 ,如 新 闻 类 资讯 .即时 聊天 等 。 事 实 上 ,这 些 新 的 应 用 也 只 不 过 是 在 SP 时 代 功 
能 基础 上 的 升级 ,这 就 是 WAP 2. 0 时 代 。 

3. 3G 时 代 

进入 3G 时 代 , 移 动 互联 网 发 展 速 度 非常 快 ,特别 是 以 谷歌 苹果 为 首 的 Android 和 iOS 
平台 的 手机 推出 后 ,智能 手机 的 功能 逐渐 变 得 非常 强大 ,例如 , WiFi 无 线 联网 、 蓝 牙 . 加 速 
计 、 指 南 针 、 重 力 感应 .数据 存储 等 功能 ,让 智能 手机 变 得 不 再 是 一 部 简单 的 手机 。 

Android 平台 手机 和 iOS 平台 的 iPhone 在 中 国 乃 至 全 球 的 手机 市 场 份额 不 断 扩大 , 越 
来 越 多 的 用 户 愿 意 尝试 使 用 这 种 新 平台 的 智能 手机 ,其 原因 有 以 下 几 点 。 

1) 硬件 设备 的 提升 

手机 经 过 十 多 年 的 发 展 , 其 硬件 设备 相 比 十 年 前 已 经 发 生 翻天 覆 地 的 变化 。 各 种 单 核 、 
双核 ,甚至 四 核 CPU 的 智能 手机 不 断 推 出 ,其 运算 速度 得 到 很 大 的 提升 ,为 大 型 软件 和 游 
戏 提供 了 最 好 的 硬件 基础 。 

2) 平台 的 开放 性 

Android 平台 以 免费 开源 的 方式 打破 了 过 去 手机 操作 系统 的 封闭 性 ,让 各 个 手机 制造 
商 可 以 利用 Android 平台 制造 出 用 户 体验 更 好 、 功 能 更 强大 的 手机 。 虽 然 OS 平台 没有 像 
Android 那样 开放 源 代码 ,但 是 iOS 和 Android 都 提供 非常 丰富 的 API 接口 和 文档 ,开发 者 
可 以 通过 其 提供 的 API 接口 开发 出 极 具 创 意 的 应 用 程序 。 

3) 更 好 的 用 户 体验 

过 去 ,Symbian 系统 占据 着 整个 手机 系统 市 场 的 半壁 江山 。 然 而 使 用 Symbian 系统 的 
手机 只 是 一 款 符合 手机 用 户 操作 习惯 的 移动 电话 。 但 是 运行 Android 或 iOS 的 手机 更 像 是 一 
款 移 动 掌上 设备 。 它 们 不 仅 提供 手机 最 基本 的 功能 ,还 能 使 用 许多 丰富 的 软件 ,游戏 开发 接口 
以 及 可 定制 的 用 户 界面 库 。 这 就 使 得 手机 用 户 可 以 使 用 用 户 体验 更 好 、 更 具 创意 的 应 用 软件 。 

4) 丰富 的 应 用 程序 

目前 基于 iOS 平台 的 App Store 软件 商店 上 软件 数量 已 经 超过 30 万 ,Android 平台 的 
Android Market 软件 市 场 上 软件 数量 更 是 已 经 超过 App Store。 以 目前 这 样 的 应 用 程序 数 
量 发 展 情况 来 看 ,手机 用 户 没有 不 使 用 它们 的 理由 。 

5) 创业 机 会 

Android 平台 的 开发 采用 的 是 Java 语言 , 它 是 目前 最 流行 的 语言 之 一 ,而 iOS 平台 则 
采用 类 似 C 的 Object-C 语言 。 这 两 种 语言 对 于 开发 者 来 说 并 不 陌生 ,要 真正 去 学 习 这 两 个 
平台 的 开发 ,其 成 本 非常 低 。 基 于 此 原因 ,很 多 开发 者 都 会 利用 这 个 契机 去 实现 创业 梦想 ， 
同时 通过 开发 各 种 应 用 程序 ,并 结合 移动 网 络 ,社交 功能 、 网 上 支付 等 重要 功能 ,不 断 寻 找 这 
些 应 用 程序 的 赢利 方向 。 


1.2 智能 手机 的 Web 浏览 器 


随 着 智能 手机 的 发 展 ,Android 平台 手机 、iOS 平 台 的 iPhone、 黑莓 (BlackBerry) 手 机 不 
断 推出 各 种 应 用 程序 。 然 而 .它们 都 各 自 内 置 有 一 款 令 人 感到 陌生 的 应 用 程序 ,就 是 移动 


Web 浏览 器 ,例如 : 

(1) Android 中 的 Android Browser; 

(2) iOS 中 的 Mobile Safari; 

(3) BlackBerry 中 的 Webkit 浏览 器 ; 

(4) Symbian S60 中 的 Web Browser for S60。 

这 些 移动 Web 浏览 器 不 同 于 过 去 的 WAP 浏览 器 , 它 能 识别 和 解释 HTML, CSS, 
JavaScript 等 代码 ,而 且 它们 都 有 一 个 共同 的 特点 就 是 其 浏览 器 的 核心 都 是 基于 Webkit。 
随 着 iOS 5. 0 版 本 的 发 布 ,Safari 浏览 器 已 经 成 为 移动 端 表现 最 好 的 Web 浏览 器 。 

虽然 Symbian 最 新 版 本 已 经 开始 自 带 有 Webkit 核心 的 浏览 器 ,但 从 目前 情况 来 看 , 它 
并 没有 像 其 余 三 种 平台 那样 得 到 广泛 使 用 。 

Webkit 实际 上 是 一 种 浏览 器 引擎 ,同时 也 蚌 一 个 开源 的 项 目 , 其 起 源 可 以 追溯 到 Kool 
Desktop Environment(KDE)。 在 桌面 浏览 器 中 ,Chrome 谷歌 浏览 器 、Apple 的 Safari 浏览 
器 都 已 经 内 置 了 Webkit 引擎 ,并 支持 HTML5 和 CSS3 特性 。 在 移动 端 方面 ,黑莓 更 是 直 
接 将 Webkit 浏览 器 内 置 到 平台 当中 。 

Mobile Safari 和 Android Browser 作为 两 大 平台 内 置 的 移动 Web 浏览 器 ,更 是 继承 各 
自 桌面 端 浏 览 器 的 特点 , 既 支持 Webkit 引擎 特性 ,也 支持 HTML5 和 CSS3 的 多 项 特性 。 

移动 Web 浏览 器 所 带 来 真正 意义 上 的 改变 ,就 是 可 以 通过 浏览 器 直接 访问 任何 通过 
HTML 静态 语言 或 类 似 PHP、ASP. NET 等 动态 语言 构建 的 Web 网 站 或 应 用 程序 ,而 不 仅 
仅 是 WAP 网 站 。 

智能 手机 的 移动 Web 浏览 器 具有 以 下 几 个 特点 。 

(1) 有 限 的 屏幕 尺寸 。 

由 于 智能 手机 屏幕 尺寸 的 原因 ,例如 ,iPhone 4 的 实际 屏幕 尺寸 是 320 X 480 或 480 X 
320( 横 向 ) ,传统 的 Web 网 站 在 移动 Web 浏览 器 中 很 难 给 用 户 完美 体验 ,因此 需要 根据 智 
能 手机 的 屏幕 大 小 定制 移动 版 Web 应 用 程序 。 

(2) 触 屏 、 缩 放 。 

在 移动 互联 网 时 代 , 触 屏 手 机 的 大 规模 应 用 及 手机 应 用 范围 的 转变 ,使 触摸 屏 成 为 行业 
的 大 趋势 。 其 中 ,Web 页面 浏览 下载、 消费 等 都 成 为 主要 应 用 场景 ,用 户 可 以 直接 在 屏幕 
上 进行 触摸 、 点 击 来 完成 交互 操作 。 

(3) 硬件 设备 的 提升 。 

智能 手机 硬件 的 不 断 升 级 换代 ,使 Apple 的 Mobile Safari 和 Android 的 Android 
Browser 两 种 移动 Web 浏览 器 得 到 更 好 的 发 展 ,同时 能 够 充分 利用 CPU 等 硬件 的 更 高 性 
能 去 做 更 多 的 事情 。 

(4) 基于 Webkit 内 核 。 

移动 Web 浏览 器 支持 各 种 Web 技术 标准 ,并 且 支 持 HTML5 和 CSS3 的 大 部 分 标准 。 


1.3 HTML5 的 移动 Web 应 用 


基于 Webkit 内 核 的 浏览 器 的 一 个 最 大 特点 就 是 支持 HTML5 和 CSS3 标准 。 基 于 
HTML5 、CSS3 和 JavaScript 的 移动 应 用 程序 将 会 是 未 来 的 趋势 。HTML5 标准 定义 的 规 
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范 非常 广泛 ,以 下 标准 在 目前 的 移动 浏览 器 中 已 得 到 支持 。 

1. Canvas 绘图 

HTML5 标准 最 大 的 变化 就 是 支持 Web 绘图 功能 。Canvas 绘图 功能 非常 强大 ,如 图 
形 绘制 .路 径 绘 制 、 变 形 、 像 素 绘图 、 动 画 等 。 用 户 可 以 通过 获取 XML 中 DOM 元 素 
Canvas ,并 调用 其 演 涩 上下文 的 Context 对 象 ,使 用 JavaScript 进行 图 形 绘制 。 

2. 多 媒体 

Apple 的 iOS 在 平台 默认 情况 下 不 支持 播放 Flash 文件 。HTML5 的 多 媒体 标准 就 是 
Apple 公司 的 最 佳 解决 方案 ,因为 它 不 需要 任何 插件 ,只 需要 几 个 页 面 标签 就 能 实现 多 媒体 
的 播放 。 

HTML5 标准 中 的 多 媒体 ,Video 视频 和 Audio 音频 正好 弥补 了 多 年 来 需要 插件 才能 
播放 Flash 模式 的 缺陷 。 现 在 只 需要 利用 Video 和 Audio 通过 简单 几 行 页 面 代 码 ,就 能 播 
放 互 联网 上 的 各 种 视频 文件 。 可 是 ,各 家 浏览 器 提供 商 对 多 媒体 标准 所 支持 的 播放 格式 不 
一 致 ,导致 多 媒体 标准 的 发 展 无 法 像 其 他 标准 那样 大 放 异 彩 。 例 如 ,Google 的 Chrome 最 
新 版 本 支持 的 多 媒体 视频 格式 是 : ogg、MPEG4、WebM, 而 Apple 的 Safari 则 只 支持 
MPEG4。 因 此 ,真正 在 移动 设备 的 Web 浏览 器 上 实现 多 媒体 功能 还 尚 需 时 日 。 

3. 本 地 存储 

为 了 满足 本 地 存储 数据 的 需求 ,HTML5 标准 中 新 增 两 种 存储 机 制 , 即 Web Storage 和 
Web SQL Database。 前 者 通过 提供 key/value 方式 存储 数据 ,后 者 通过 类 似 关系 数据 库 的 
形式 存储 数据 。 移 动 Web 浏览 器 对 Web Storage 的 支持 情况 比较 理想 。 

4. 离线 应 用 

HTML5 标准 规范 提供 一 种 离线 应 用 的 功能 。 当 支持 离线 应 用 的 浏览 器 检测 到 清单 文 
件 (Manifest File) 中 的 任何 资源 文件 时 , 便 会 下 载 对 应 的 资源 文件 ,将 它们 缓存 到 本 地 , 同 
时 它 也 保证 本 地 资源 文件 的 版 本 和 服务 器 上 的 保持 一 致 。 

对 于 移动 设备 来 说 , 当 无 网 络 状 态 可 用 时 ,Web 浏览 器 便 会 自动 切换 到 离线 状态 ,并 读 
取 本 地 资源 以 保证 Web 应 用 程序 继续 可 用 。 

5. 使 用 地 理 位 置 

现在 ,很 多 现代 浏览 器 中 都 实现 了 一 个 神奇 的 功能 , 它 能 实时 获取 到 当前 在 地 图 上 所 在 
的 位 置 。 虽 然 地 理 定位 标准 严格 上 来 说 并 不 属于 HTML5 标准 规范 的 一 部 分 ,但 它 已 经 逐 
渐 得 到 大 部 分 浏览 器 的 支持 。 

6. 移动 Web 框架 

因为 有 了 Webkit 和 HTML5 的 支持 , 越 来 越 多 的 Web 开发 者 开始 研究 基于 移动 平台 
的 Web 应 用 框架 ,例如 ,基于 jQuery 页 面 驱动 的 jQuery Mobile. ,基于 ExtJS 架构 的 
Sencha Touch ,以 及 能 打通 Web 和 Native 两 者 之 间 通 道 的 PhoneGap 框架 。 

目前 基于 HTML5 移动 Web 框架 存在 两 种 不 同 的 开发 模式 : 基于 传统 Web 的 开发 和 
基于 组 件 式 的 Web 开发 。 

基于 传统 Web 的 开发 模式 ,就 是 在 传统 Web 网 站 上 ,根据 移动 设备 (如 手机 ) 平 台 的 特 
点 展示 其 移动 版 的 Web 站 点 。 目 前 最 能 体现 该 开发 模式 优势 的 Web 框架 是 jQuery 
Mobile。 通 过 使 用 CSS3 的 新 特性 ,Media Queries 模块 在 实现 一 个 站 点 的 同时 能 自 适应 任 
何 设备 ,包括 桌面 计算 机 和 智能 手机 。 


基于 组 件 式 的 Web 开发 有 些 类 似 于 Ext 所 提供 的 富 客户 端 开 发 模式 ,在 该 模式 下 几乎 
所 有 的 组 件 或 视图 都 封装 在 JavaScript 内 ,然后 通过 调用 这 些 组 件 展 示 Web 应 用 。 这 种 模 
式 的 最 佳 代表 是 Sencha Touch, 


1.4 移动 Web 和 桌面 Web 


从 根本 上 说 ,只 有 一 种 Web, Web 内 容 是 可 以 使 用 各 种 Web 浏览 器 查看 的 标准 化 标 
记 、 样 式 、 和 脚本 和 和 多媒体。 在 本 书 中 ,按照 惯例 将 这 种 Web 称 为 桌面 Web。 我 们 可 以 在 台 
式 计算 机 笔记本、 上 网 本 上 通过 Firefox, Opera 或 Internet Explorer 等 浏览 器 访问 桌面 
Web ,进行 网 上 冲浪 。 

桌面 Web 由 通过 TCP/IP 计算 机 网 络 连接 在 一 起 的 大 量 服务 器 构成 。 这 种 服务 器 称 
为 Web 服务 器 ,很 多 Web 服务 器 实现 超 文 本 传输 协议 (HTTP) 共 享 文档 和 文件 。Web JE 
务 器 通过 统一 资源 标识 符 (Uniform Resource Identifier, URT) 提 供 对 文本 文件 ,标记 文档 和 
二 进 制 资源 的 访问 。 

在 HTTP 请 求 中 ,客户 端 向 Web 服务 器 发 送 所 需 资源 的 URI 以 及 一 组 请 求 头 , 其 中 
一 个 请 求 头 包含 MIME 类 型 列表 ,该 列表 公布 客户 端 支 持 的 内 容 类 型 。 

在 HTTP 响应 中 ,Web 服务 器 除了 向 客户 端 发 送 请 求 的 文档 (标记 、 文 本 或 二 进 制 文 
件 ) 外 ,还 会 附带 另外 一 组 头 ,其 中 一 个 头 包含 MIME 类 型 ,描述 传输 到 客户 端的 文档 的 文 
件 类 型 。 

移动 Web 在 桌面 Web 的 基础 上 添加 了 新 的 MIME 类 型 .标记 语言 .文档 格式 和 最 佳 
实践 ,为 小 尺寸 屏幕 提供 优化 的 Web 内 容 , 并 可 解决 移动 设备 上 的 资源 限制 ,Web 浏览 器 
可 用 性 差 等 问题 。 

移动 Web 在 Web 生态 系统 中 引入 了 一 些 新 的 组 件 ,包括 : 针对 移动 设备 进行 了 优化 
的 标记 语言 和 样式 ; 可 区 分 移动 标记 和 桌面 HTML 的 MIME 类 型 ; 具有 大 量 功 能 的 浏览 
器 客户 端 ; 使 内 容 更 适合 上 述 客 户 端的 网 络 代理 。 

移动 Web 开发 是 一 门 全 新 的 学 科 , 原 因 如 下 。 

(1) 移动 Web 生态 系统 是 全 新 的 。 移 动 Web 使 用 桌面 Web 的 既 有 知识 ,但 它 也 有 一 
些 从 移动 设备 独 有 的 特性 衍生 出 来 的 新 的 最 佳 实践 和 疑难 问题 。 桌 面 并 不 适用 。 带 宽 占用 
量 是 一 个 比较 关键 的 问题 ,即使 对 智能 手机 也 是 如 此 。 使 用 JavaScript 架构 以 及 异步 
JavaScript 和 XML(AJAX) 等 Rich Web 2. 0 功能 时 务必 要 并 慎 , 否 则 有 电池 电量 耗 尽 的 风 
险 。 运 营 商 经 常会 控制 和 阻止 移动 Web 站 点 的 流量 。 在 移动 标记 传输 到 移动 浏览 器 的 途 
中 ,代码 转换 代理 经 常会 尝试 重 置 移动 标记 的 格式 。 最 后 ,必须 编写 一 些 保护 性 的 程序 , 降 
低 代 码 转换 器 暴露 以 及 出 现 移动 网 络 问题 的 概率 。 

(2) 移动 Web 用 户 是 全 新 的 。 移 动 Web 用 户 采 用 独特 的 使 用 模式 和 导航 方法 。 移 动 
用 户 具有 强烈 的 目标 导向 性 和 位 置 感知 能 力 。 在 影响 移动 用 户 的 移动 Web 浏览 体验 的 主 
要 因素 中 , 即 包括 在 服务 区 内 外 漫游 时 的 网 络 访问 问题 。 实 际 上 ,对 成 本 敏感 的 移动 用 户 宁 
可 取消 网 络 交易 ,也 不 愿意 因 错 误 操 作 而 支付 费用 。 

(3) 移动 Web 浏览 器 是 全 新 的 。 移 动 浏览 器 具有 其 他 浏览 器 所 不 具备 的 优势 ,同时 也 
有 一 些 与 众 不 同 的 问题 及 相应 的 解决 方法 。Web 标准 实现 不 彻底 是 经 常 出 现 的 问题 。 
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Web 页 面 格式 错误 会 对 移动 设备 产生 严重 的 影响 ,包括 浏览 器 崩溃 或 设备 重 置 。 用 户 非常 
需要 JavaScript 和 AJAX 等 高 级 Web 功能 ,但 这 些 功能 会 影响 电池 的 使 用 寿命 。 市 场 上 有 
数 十 家 移动 浏览 器 供应 商 ,确保 Web 标准 遵从 性 的 重担 就 落 在 了 原始 设备 制造 商 (Original 
Equipment Manufacturer, OEM) 和 运营 商 肩 上 。 


小 结 
在 本 章 中 ,首先 介绍 了 智能 机 的 发 展 过 程 , 以 及 相应 的 浏览 器 ,然后 介绍 了 HTML 的 


移动 Web 应 用 ,最 后 介绍 了 移动 Web 和 桌面 Web 的 区 别 , 通 过 本 章 的 学 习 , 可 以 对 移动 
Web 开发 技术 有 个 初步 的 了 解 。 


第 2 章 HTMLS 与 移动 Web 


本 章 学 习 目 标 

。 HTML5 标签 元 素 
。 移动 Web 页 面 布局 
。 移动 Web 实例 


标准 通用 标记 语言 下 的 一 个 应 用 HTML 标准 自 1999 年 12 月 发 布 的 HTML4. 01 后 ， 
后 继 的 HTML5 和 其 他 标准 被 束之高阁 .为 了 推动 Web 标准 化 运动 的 发 展 ,一 些 公司 联合 
起 来 ,成 立 了 一 个 叫做 WHATWG (Web Hypertext Application Technology Working 
Group, Web 超 文 本 应 用 技术 工作 组 ) 的 组 织 。WHATWG 致力 于 Web 表单 和 应 用 程序 ， 
而 W3C(World Wide Web Consortium ,万 维 网 联盟 ) 专 注 于 XHTML2.0。 在 2006 年 ,双方 
决定 进行 合作 ,来 创建 一 个 新 版 本 的 HTML。 

HTML5 草案 的 前 身 名 为 Web Applications 1. 0, F 2004 年 被 WHATWG 提出 ,于 
2007 年 被 W3C 接纳 ,并 成 立 了 新 的 HTML 工作 团队 。HTML5 的 第 一 份 正 式 草案 已 于 
2008 年 1 月 22 日 公布 。HTML5 仍 处 于 完善 之 中 。 然 而 ,大 部 分 现代 浏览 器 已 经 具备 了 
某 些 HTML5 支持 。 

2012 年 12 月 17 日 ,万 维 网 联盟 (W3C) 正 式 宣布 凝结 了 大 量 网 络 工 作者 心血 的 
HTML5 规范 已 经 正式 定稿 。 根 据 W3C 的 发 言 稿 称 :“HTML5 是 开放 的 Web 网 络 平台 
的 葛 基 石 。” 

2013 年 5 月 6 日 ,HTML5.1 正式 草案 公布 。 该 规范 定义 了 第 5 次 重大 版 本 ,第 一 次 要 
修订 万 维 网 的 核心 语言 : 超 文 本 标记 语言 (HTML)。 在 这 个 版 本 中 ,新 功能 不 断 推出 ,以 帮 
助 Web 应 用 程序 的 作者 ,努力 提高 新 元 素 互 操 作 性 。 本 次 草案 的 发 布 ,从 2012 年 12 月 27 
日 至 今 , 进 行 了 多 达 近 百 项 的 修改 ,包括 HTML 和 XHTML 的 标签 ,相关 的 API, Canvas 
等 ,同时 HTML5 的 图 像 img 标签 及 svg 也 进行 了 改进 ,性 能 得 到 进一步 提升 。 

2014 #E 10 月 29 日 ,万 维 网 联盟 经 过 近 八 年 的 艰辛 努力 ,HTML5 标准 规范 终于 最 终 
制定 完成 了 ,并 已 公开 发 布 。 

HTML5 手机 应 用 的 最 大 优势 就 是 可 以 在 网 页 上 直接 调试 和 修改 。 原 先 应 用 的 开发 人 
员 可 能 需要 花费 非常 大 的 力气 才能 达到 HTML5 的 效果 .不断 地 重复 编码 .调试 和 运行 ,这 
是 首先 得 以 解决 的 一 个 问题 。 因 此 也 有 许多 手机 杂志 客户 端 是 基于 HTML5 标准 ,开发 人 
员 可 以 轻松 调试 修改 。HTML5 将 会 取代 1999 年 制定 的 HTMLA. 01.XHTML1. 0 标准 ， 
以 期 能 在 互联 网 应 用 迅速 发 展 的 时 候 :使 网 络 标准 达到 符合 当代 的 网 络 需求 ,为 桌面 和 移动 
平台 带 来 无 颖 衔接 的 丰富 内 容 。 
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支持 HTML5 的 浏览 器 包括 Firefox( 火 狐 浏览 器 ),IE 9 及 其 更 高 版 本 ,Chrome( 谷 歌 
浏览 器 ), Safari, Opera 等 ; 国内 的 邀 游 浏览 器 (Maxthon), 以 及 基于 IE 或 Chromium 
(Chrome 的 工程 版 或 称 实验 版 ) 所 推出 的 360 浏览 器 ,搜狗 浏览 器 .QQ 浏览 器 、 猫 豹 浏览 器 
等 国产 浏览 器 同样 具备 支持 HTML5 的 能 力 。 

HTML5 提供 了 一 些 新 的 元 素 和 属性 ,例如 ,一 nav 二 (网 站 导航 块 ) 和 志 footer 二 。 这 种 
标签 将 有 利于 搜索 引擎 的 索引 整理 ,同时 更 好 地 帮助 小 屏幕 装置 和 视 障 人 士 使 用 。 除 此 之 
外 ,还 为 其 他 浏览 要 素 提 供 了 新 的 功能 ,如 过 audio 之 和 到 video 过 标记。 一 些 过 时 的 
HTMLA 标记 将 被 取消 。 其 中 包括 纯粹 显示 效果 的 标记 ,如 二 font 宝 和 二 center 记 ,它们 已 
经 被 CSS 取代 。 

在 本 章 中 ,主要 结合 移动 设备 的 特点 ,介绍 了 HTML5 中 新 增 的 语义 化 标签 元 素 ,以 及 
在 移动 Web 浏览 器 下 Web 页 面 布局 的 知识 及 例子 。HTML5 标准 添加 的 新 元 素 当 中 ,用 
于 标识 常见 页 面 结构 的 包括 : section、header,footer、nav、article 和 mark 等 。 


2.1 _ HTMLS 的 优势 


(1) 让 Web 再 次 回归 到 富 客户 端 地 步 ,减少 了 对 第 三 方 插件 的 依赖 。 

在 之 前 的 HTMLA 的 标准 中 并 没有 对 于 视频 ,音频 以 及 其 他 的 富 客户 端 技术 支持 得 非 
常 好 ,这 就 使 得 Flash 和 SilverLight 变 得 异常 的 成 功 。 而 在 HTML5 新 标准 中 原生 的 就 支 
持 音 频 、 视 频 ,画布 等 技术 。 让 Web 程序 拥有 更 多 富 客户 端 表现 的 方式 ,而 且 让 Web 程序 
更 加 独立 ,更 好 地 适应 多 种 形式 的 客户 端 。 

(2) 对 本 地 离线 存储 的 更 好 的 支持 。 

由 于 之 前 想 在 客户 端 保存 一 些 数据 都 是 由 cookie 完成 的 ,但 是 cookie 不 适合 大 量 数据 
的 存储 ,因为 它们 由 每 个 对 服务 器 的 请 求 来 传递 ,这 使 得 cookie 速度 很 慢 而 且 效 率 也 不 高 。 
HTML5 提供 了 两 种 在 客户 端 存储 数据 的 新 方法 : localStorage( 没 有 时 间 限 制 的 数据 存储 ) 
和 sessionStorage( 针 对 一 个 session 的 数据 存储 ) 。 

在 HTML5 中 ,数据 不 是 由 每 个 服务 器 请 求 传递 的 ,而 是 只 有 在 请 求 时 使 用 数据 。 它 
使 在 不 影响 网 站 性 能 的 情况 下 存储 大 量 数据 成 为 可 能 。 对 于 不 同 的 网 站 ,数据 存储 于 不 同 
的 区 域 ,并 且 一 个 网 站 只 能 访问 其 自身 的 数据 。HTML5 使 用 JavaScript 来 存储 和 访问 数 
据 。 有 了 本 地 数据 库 的 支持 ,让 一 些 简单 的 离线 应 用 也 成 为 可 能 。 

(3) 新 的 特殊 内 容 元 素 ,更 好 地 支持 SEO. 

现在 所 有 的 站 点 基本 上 都 是 DIV 十 CSS 布局 ,几乎 所 有 的 文章 标题 内容、 辅助 介绍 等 
都 用 DIV 容器 来 承载 。 搜 索引 擎 在 抓 取 页 面 内 容 时 ,因为 没有 明确 的 容器 的 含义 只 能 去 猜 
测 这 些 标签 容器 承载 的 是 文章 标题 还 是 文章 内 容 等 ,HTML5 新 标准 中 直接 添加 了 拥有 具 
体 含义 的 HTML 标签 ,如 article、footer、header、nav、section。 

(4) 更 加 智能 的 表单 标签 。 

之 前 的 表单 标签 ,仅仅 是 简单 的 类 型 的 约束 ,比如 文本 框 , 文 本 域 . 下 拉 列 表 等 ,而 跟 业 
务 结合 紧密 的 表单 标签 数据 校 验 等 控制 都 没有 很 好 的 支持 ,而 使 用 这 些 技 术 基 本 上 都 是 跟 
第 三 方 的 JavaScript 控件 进行 结合 使 用 ,但 是 这 些 第 三 方 总 会 涉及 版 本 控制 .浏览 器 兼容 
性 、 非 标准 等 一 系列 的 问题 ,而 在 HTML5 的 标准 中 直接 添加 了 智能 表单 ,让 这 一 切 都 变 得 


那么 的 简单 ,比如 calendar date time .email ,url search, 

(5) HTML5 引入 了 画布 。 

画布 的 引入 使 得 Web 端 生成 动画 效果 BE Web 游戏 .更 好 的 交互 体验 设计 都 增加 了 
无 限 的 变数 。HTML5 的 canvas 元 素 使 用 JavaScript 在 网 页 上 绘制 图 像 。 画 布 是 一 个 矩形 
区 域 ,可 以 控制 其 每 一 像素 。canvas 拥有 多 种 绘制 路 径 、 矩 形 、 圆 形 、 字 符 以 及 添加 图 像 的 
方法 。 

(6) 支持 多 线程 。 

在 不 影响 UI 更 新 及 浏览 器 与 用 户 交 互 的 情况 下 ,前 端 做 大 规模 运算 ,只 能 通过 
setTimeout 等 去 模拟 多 线程 。 而 新 的 标准 中 ,JavaScript 新 增 的 HTML5 Web Worker 对 
象 原生 的 就 支持 多 线程 。 

(7) WebSocket 让 跨 域 请 求 .长 连接 .数据 推送 等 一 切 都 变 得 那么 简单 。 

WebSocket 是 在 一 个 (TCP) 接 口 进行 双向 通信 的 技术 , 它 是 HTML5 规范 新 引入 的 功 
能 ,用 于 解决 浏览 器 与 后 台 服 务 器 双向 通信 的 问题 ,使 用 WebSocket 技术 ,后 台 可 以 随时 向 
前 端 推 送 消 息 , 以 保证 前 后 台 状 态 统 一 ,在 传统 的 无 状态 HTTP 中 ,这 是 无 法 做 到 的 。 

(8) 更 好 的 异常 处 理 。 

HTML5 浏览 器 将 在 错误 语法 的 处 理 上 更 加 灵活 ,HTML5 在 设计 时 保证 旧 的 浏览 器 
能 够 安全 地 忽略 掉 新 的 HTML5 代码 。 与 HTML4 相 比 ,HTML5 给 出 了 解析 的 完整 规 
则 ,让 不 同 的 浏览 器 即使 在 发 生 语法 错误 时 也 能 返回 完全 相同 的 结果 。 

(9) 文件 API 让 文件 上 传 和 操纵 文件 变 得 更 简单 。 

由 于 项 目 中 经 常 遇 到 用 Web 应 用 控制 操作 本 地 文件 ,而 之 前 都 是 使 用 一 些 富 客户 端 技 
术 比 如 Flash、ActiveX、Silverlight 等 , 面 对 文 件 ,JavaScript 无 能 为 力 。 而 在 HTML5 中 新 
提供 的 FHTML5 File API 让 JavaScript 可 以 轻松 上 阵 了 。 

(10) 编辑 、 拖 放 、 微 数据 、 浏 览 历史 管理 ,地 理 信息 接口 API\ 设 备 硬件 操 作 API 等 新 
功能 。 

当然 HTML5 不 是 孤立 的 ,JavaScript API 的 增强 ,让 JavaScript 变 成 异常 强大 的 未 来 
的 编程 武器 。CSS3 给 未 来 Web 应 用 也 带 来 了 极 大 的 新 的 挑战 。 由 于 HTML5 标准 化 的 支 
持 , 相 信 未 来 Web 技术 真正 地 可 以 跑 在 任何 客户 端 ,也 让 Web 应 用 更 加 独立 ,更 加 轻松 地 
融入 到 各 个 客户 端 。 

通过 上 面 HTML5 的 新 特点 ,容易 了 解 到 HTML5 的 新 特性 带 给 开发 者 的 是 更 友好 更 
丰富 的 本 地 处 理 API, 更 智能 更 优雅 的 HTML 标签 ,更 强 的 本 地 处 理 功 能 ,通信 也 进一步 
加 强 。 作 为 开发 者 , 当 Adobe 公司 宣布 放弃 Flash, 把 最 大 的 精力 放 到 HTML5 的 开发 上 的 
时 候 ,就 可 能 会 看 到 这 些 趋 势 , 当 微软 选择 了 HTML5 而 放弃 了 Silverlight 继续 升级 的 时 候 ， 
那 就 基本 上 也 没有 什么 好 选择 的 了 。HTML5 的 发 力 ,的 确 给 每 个 开发 者 都 带 来 了 机 会 。 


2.2 HTML4 与 HTMLS 的 区 别 


HTML5 是 HTML 标准 的 下 一 个 版 本 。 越 来 越 多 的 程序 员 开 始 用 HTML5 来 构建 网 
站 。 如 果 同 时 使 用 HTML4 和 HTML5, 会 发 现 用 HTML5 从 头 构建 , 比 从 HTML4 迁移 
到 HTML5 方便 很 多 。 虽 然 HTML5 没有 完全 颠覆 HTML4, 它 们 还 是 有 很 多 相似 之 处 ， 
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但 是 它们 也 有 一 些 关键 的 不 同 。 本 文 就 列 出 了 它们 之 间 10 个 关键 的 不 同 之 处 。 

(1) HTML5 标准 还 在 制定 中 。 

首先 要 注意 的 是 ,HTML5 虽然 现在 很 流行 ,但 是 HTML5 标准 还 在 制定 中 ,标准 仍 在 
改变 。HTML4 已 经 十 多 年 了 ,不 会 有 任何 改变 了 。 

(2) 简化 的 语法 。 

HTML, 简化 了 很 多 细微 的 语法 ,例如 doctype 的 声明 ,用 户 只 需要 写 二 1doctype html> 
就 行 了 。HTML5 兼容 HTML4 和 HTML1.0, 但 是 与 SGML 不 兼容 。 

(3) 一 canvas 二 标签 替代 Flash, 

Flash 给 很 多 Web 开发 者 带 来 了 麻烦 ,要 在 网 页 上 播放 Flash 需要 一 堆 代 码 和 插件 。 
去 canvas 之 标签 使 得 开发 者 只 要 使 用 一 个 标签 就 能 和 用 户 产 生 UI 交互 。 虽 然 目 前 
去 canvas 二 标签 还 不 能 实现 Flash 的 所 有 功能 ,但 是 很 快 二 canvas 之 就 会 让 Flash 看 起 来 过 
时 了 。 

(4) 新 增 二 header 二 和 二 footer 二 标签 。 

HTML5 设计 的 一 个 原则 是 更 好 地 体现 网 站 的 语义 性 ,所 以 增加 了 去 header 之 和 
去 footer> 这 样 的 标签 ,用 来 明确 表示 网 页 的 结构 。 

(5) 新 增 一 section 之 和 一 article 之 标签 。 

与 二 header 二 和 二 footer 二 类 似 , 一 section 二 和 二 article 二 也 有 利于 清晰 化 网 页 的 结构 ， 
更 有 利于 SEO。 

(6) 新 增 二 menu 之 和 一 figure 之 标签 。 

所 menu 二 可 以 被 用 于 创建 传统 的 菜单 ,也 可 以 用 于 工具 栏 和 上 下 文 菜 单 。 二 figure 二 
标签 使 得 网 页 文字 和 图 片 的 排版 更 专业 。 

(7) W <audio> H< video > FRE - 

这 两 个 标签 可 能 是 HTML5 里 面 最 有 用 的 两 个 标签 。 顾 名 思 义 ,这 两 个 标签 是 用 来 播 

音频 和 视频 的 。 

(8) 全 新 的 表单 。 

HTML5 对 过 form 之 和 所 forminput 之 标签 进行 了 大 量 修改 ,添加 了 很 多 新 的 属性 ,也 
修改 了 很 多 属性 。 

(9) 删除 二 b 二 和 二 font 二 标签 。 

这 个 改进 很 多 人 还 无 法 理解 。 他 们 不 认为 删除 这 两 个 标签 对 代码 的 改进 有 很 大 的 帮 
助 。 官 方 的 解释 是 应 该 用 CSS 来 替代 这 两 个 标签 。 但 是 对 于 简单 的 文本 ,这 两 个 标签 还 是 
很 方便 的 。 

(10) 删除 一 frame 过、 一 center 二 和 一 big 二 标签 。 

以 上 10 点 只 是 HTML5 和 HTML4 差别 的 很 小 一 部 分 ,当然 还 有 很 多 其 他 的 变化 ,这 
里 不 一 一 介绍 。 


2.3 HTML5 的 新 标签 


在 之 前 的 HTML 页 面 中 ,基本 上 都 是 用 DIV 十 CSS 的 布局 方式 。 而 搜索 引擎 去 抓 取 
页 面 内 容 的 时 候 , 它 只 能 猜测 某 个 DIV 内 的 内 容 是 文章 内 容 容 器 ,或 者 是 导航 模块 的 容器 ， 


或 者 是 作者 介绍 的 容器 等 。 也 就 是 说 整个 HTML 文档 结构 定义 不 清晰 ,HTML5 中 为 了 解 
决 这 个 问题 ,专门 添加 了 : 页 眉 、 页 脚 . 导航 文章 内 容 等 跟 结构 相关 的 结构 元 素 标签 。 
在 介绍 这 些 新 标签 之 前 , 先 看 一 个 普通 的 页 面 的 布局 方式 ,如 图 2. 1 所 示 。 


<div id=“header”> 


<div class=“article”> 


A <div id=“sidebar”> 
<div class="section”> 


图 2.1 普通 的 页 面 布局 
从 图 2. 1 中 可 以 非常 清晰 地 看 到 一 个 普通 的 页 面 ,会 有 头 部 .导航 、 文 章 内 容 , 还 有 附着 
的 右边 栏 , 以 及 底部 等 模块 ,通过 class 进行 区 分 ,并 通过 不 同 的 CSS 样式 来 处 理 。 而 
HTML5 新 标签 带 来 的 新 的 布局 则 如 图 2. 2 所 示 。 


<header> 


<article> 


<aside> 


<section> 


<footer> 


2.2 HTML5 新 标签 布局 


图 2. 2 相关 的 HTML 代码 如 下 。 


<body> 
< header >...</header > 
<nav>...</nav > 
<article> 
< section> 


</section> 
</article> 
<aside>...</aside> 
< footer >...</footer > 
</body> 


有 了 上 面 的 直接 的 感官 的 认识 后 .下 面 来 介绍 HTML5 中 的 相关 结构 标签 。 


2.3.1 section 标签 


二 section 记 标签 ,定义 文档 中 的 节 。 比 如 音节、 页 眉 、 页 脚 或 文档 中 的 其 他 部 分 。 一 般 
用 于 成 节 的 内 容 ,会 在 文档 流 中 开始 一 个 新 的 节 。 它 用 来 表现 普通 的 文档 内 容 或 应 用 区 块 ， 
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通常 由 内 容 及 其 标题 组 成 。 但 section 元 素 标签 并 非 一 个 普通 的 容器 元 素 , 它 表示 一 段 专题 
性 的 内 容 ,一般 会 带 有 标题 。 

当 描 述 一 件 具 体 的 事物 的 时 候 , 通 常 鼓励 使 用 article 来 代替 section; 当 使 用 section 
时 ,仍然 可 以 使 用 hl 来 作为 标题 ,而 不 用 担心 它 所 处 的 位 置 ,以 及 其 他 地 方 是 否 用 到 ; 当 一 
个 容器 需要 被 直接 定义 样式 或 通过 脚本 定义 行为 时 ,推荐 使 用 DIV 元 素 而 非 section, 
到 section 之 标签 示例 代码 如 下 。 


< section> 

< hl > section 是 什么 ?</hl > 
<h2 > 一 个 新 的 章节 </h2 > 
<article> 

< h2 > 关于 section </hl > 
<p> section 的 介绍 </p> 


</article> 
</section> 


2.3.2 article 标签 


一 article 二 是 一 个 特殊 的 section 标签 , 它 比 section 具有 更 明确 的 语义 ,代表 一 个 独立 
的 、 完 整 的 相关 内 容 块 ,可 独立 于 页 面 其 他 内 容 使 用 。 例 如 ,一 篇 完整 的 论坛 帖子 ,一 篇 博客 
文章 ,一 个 用 户 评论 等 。 一 般 来 说 ,article 会 有 标题 部 分 (通常 包含 在 header 内 ), 有 时 也 会 
包含 footer, article 可 以 嵌 套 ,内 层 的 article 对 外 层 的 article 标签 有 隶属 关系 。 例 如 ,一 篇 
博客 的 文章 ,可 以 用 article 显示 ,然后 一 些 评论 可 以 以 article 的 形式 嵌入 其 中 。 到 article 二 
标签 示例 代码 如 下 。 


<article> 

<header> 

<hgroup> 

< hl > 这 是 一 篇 介绍 HTML5 结构 标签 的 文章 </hl > 

< h2 > HTML5 的 革新 </h2 > 

</hgroup > 

< time datetime = "2015 — 08 — 20"> 2015.08.20 </time> 
</header > 

<p> 文 章 内 容 详 情 </p> 

</article> 


2.3.3 nav 标签 


nav 标签 代表 页 面 的 一 个 部 分 ,是 一 个 可 以 作为 页 面 导 航 的 链接 组 ,其 中 的 导航 元 素 链 
接 到 其 他 页 面 或 者 当前 页 面 的 其 他 部 分 ,使 HTML 代码 在 语义 化 方面 更 加 精确 ,同时 对 于 
屏幕 阅读 器 等 设备 的 支持 也 更 好 ,二 nav 之 标签 示例 代码 如 下 。 


<nav> 
<ul> 


<1i> 首 页 </1i> 

<1i> 新 闻 综 合 </1i> 
<1i> 联 系 我 们 </1i> 
</ul> 

</nav > 


2.3.4 aside # £ 


aside 标签 用 来 装载 非 正文 的 内 容 , 被 视 为 页 面 里 面 一 个 单独 的 部 分 。 它 包含 的 内 容 与 
页 面 的 主要 内 容 是 分 开 的 ,可 以 被 删除 ,而 不 会 影响 网 页 的 内 容 、 章 节 或 是 页 面 所 要 传达 的 
信息 。 例 如 ,广告 .成 组 的 链接 、 侧 边栏 等 。 过 aside 之 标签 示例 代码 如 下 。 


<aside> 

<hl > 作者 简介 </hl > 
<p>IT</p> 
</aside> 


2.3.5 header 标签 


二 header 二 标签 定义 文档 的 页 眉 ,通常 是 一 些 引 导 和 导航 信息 。 它 不 局 限于 写 在 网 页 
头 部 ,也 可 以 写 在 网 页 内 容 里 面 。 

通常 二 header> 标 签 至 少 包含 (但 不 局 限于 ) 一 个 标题 标记 (过 hl 之 一 过 h6 之 ) ,还 可 以 
包括 二 hgroup 过 标签 ,也 可 以 包括 表格 内 容 . 标 识 、 搜 索 表 单一 nav 二 导航 等 。 一 header 二 
标签 示例 代码 如 下 。 


< header > 

< hgroup > 

< hl > 网 站 标题 </hl > 

< hl > 网 站 副标题 </hl > 
</hgroup > 

</header > 


2.3.6 footer 标签 


footer 标签 定义 section 或 document 的 页 脚 ,包含 与 页 面 、 文 章 或 是 部 分 内 容 有 关 的 信 
息 , 比 如 文章 的 作者 或 者 日 期 。 作 为 页 面 的 页 脚 时 ,一 般 包含 版 权 、 相 关 文件 和 链接 。 它 和 
去 header> 标 签 的 使 用 方法 基本 一 样 , 可 以 在 一 个 页 面 中 多 次 使 用 ,如 果 在 一 个 区 段 的 后 面 
加 入 footer, 那 么 它 就 相当 于 该 区 段 的 页 脚 了 。 一 footer 二 标签 示例 代码 如 下 。 


< footer > 
COPYRIGHT@ 版 权 所 有 


</footer > 


2.3.7 hgroup # £ 


hgroup 标签 是 对 网 页 或 区 段 section 的 标题 元 素 (hl 一 h6) 进 行 组 合 。 例 如 ,在 一 区 段 


HTML5 -5 # z Web 


Tk ro 避 


移动 Web FERR 


中 有 连续 的 h 系列 的 标签 元 素 , 则 可 以 用 hgroup 将 它们 括 起 来 。 过 hgroup 二 标签 示例 代码 
如 下 。 


<hgroup> 

< h1 > 这 是 一 篇 介绍 HTML 5 结构 标签 的 文章 </hl > 
< h2 > HTML. 5 的 革新 </h2> 

</hgroup> 


2.3.8 figure 标签 


figure 标签 用 于 对 元 素 进 行 组 合 ,多 用 于 图 片 与 图 片 描述 组 合 。 二 figure 标 签 示 例 代 
码 如 下 。 


<figure> 

< img src = "img. gif" alt = "figure 标签 ” title= "figure 标签" /> 
<figcaption> 这 儿 是 图 片 的 描述 信息 </figcaption> 

</figure> 


2.3.9 表单 标签 


在 之 前 的 HTML 表单 标签 中 ,对 于 一 些 功 能 支持 得 不 够 好 ,比如 : 文本 框 提示 信息 (之 
前 只 能 通过 JavaScript 和 input 的 事件 结合 处 理 ) .表单 校 验 .日 期 选择 控件 ,颜色 选择 控件 、 
范围 控件 .进度 条 、 标 签 跨 表单 等 功能 。 当 然 可 以 直接 通过 JavaScript 和 DOM 元 素 配合 实 
现 这 些 通用 的 功能 。 这 些 功 能 和 标签 都 已 经 大 量 地 使 用 在 了 现代 的 Web 应 用 中 ,而 这 些 公 
共性 的 东西 在 早期 的 HTML 标准 中 没有 直接 的 标准 支持 ,而 在 HTML5 中 ,新 标准 直接 把 
这 些 常 用 的 基本 功能 直接 加 入 到 新 的 表单 标签 中 ,真正 把 表单 功能 变 得 异常 强大 。 新 的 标 
准 中 添加 了 很 多 输入 型 控件 ,比如 number、url、email、range、color 等 。 而 它们 都 是 以 input 
标签 的 type 属性 出 场 , 下 面 简单 介绍 一 下 。 

1. 只 能 输入 数字 的 number 类 型 input 标签 

number 类 型 的 input 标签 用 于 应 该 包含 数值 的 输入 域 , 还 能 够 设 定 对 所 接受 的 数字 的 
限定 。 例 如 ,只 能 输入 数字 的 number 类 型 input 标签 的 HTML 代码 如 下 。 


< input type = "number" name = "demoNumber" min = "1" max = "100" step = "2"/> 


PE. 此 标签 其 实 就 是 普通 的 input 标签 ,只 不 过 是 type 类 型 指向 了 number, 标 识 当 前 
标签 只 接受 数字 类 型 输入 ,另外 添加 了 4 个 属性 。 

(1) name: 用 来 标识 表单 提交 时 的 key 值 。 

(2) min: 是 表单 标签 新 增加 的 属性 ,标识 当前 输入 框 输入 的 最 小 值 。 

(3) max: 标识 输入 框 输入 的 最 大 值 。 

(4) step: 是 步 长 的 意思 ,也 就 是 在 增 大 或 者 减 小 的 时 候 所 增加 或 减少 的 步 长 。 

小 结 : min、max、step 是 表单 标签 中 添加 的 新 的 属性 。 另 外 就 是 type 又 增加 了 一 个 新 
的 number 类 型 ,接受 数字 输入 。 而 之 前 要 做 到 这 样 的 效果 只 能 通过 JavaScript 在 失去 焦点 
时 候 判 断 ,控制 起 来 不 那么 方便 ,现在 一 切 都 非常 简单 。 


2. 新 型 email 类 型 input 标签 
email 类 型 的 input 标签 用 于 应 该 包含 E-mail 地 址 的 输入 域 。 在 提交 表单 时 ,会 自动 验 
证 email 域 的 值 。 例 如 ,新 型 email 类 型 input 标签 的 HTML 代码 如 下 。 


< input type = "email" name = "email" placeholder = "请 输入 注册 邮箱 "人 > 


在 上 面 的 HTML 代码 中 ,相对 于 之 前 的 标签 ,不同 点 是 : type 一 "email" 表 示 当 前 input 
标签 接收 一 个 邮箱 的 输入 。 另 外 就 是 : placeholder= "请 输入 注册 邮箱 " ,这 个 属性 的 功能 ， 
相信 看 到 此 时 的 效果 的 时 候 用 户 会 感到 非常 兴奋 ,而 在 之 前 实现 此 提示 信息 ,需要 监听 一 下 
文本 框 的 blur 事件 ,然后 判断 是 否 为 空 ,为 空 再 去 给 文本 框 赋值 一 个 灰色 的 字体 提示 信息 ， 
而 现在 只 需要 一 个 简单 属性 指定 就 可 以 实现 了 。 

小 结 : 当 表单 在 提交 前 ,此 文本 框 会 自动 校 验 是 否 符合 邮箱 的 正则 表达 式 ,另外 
placeholder 属性 带 来 的 提示 信息 功能 也 十 分 强大 。 

3. 新 型 url 类 型 input 标签 

HR email XW input 标签 类 似 ,url 类 型 用 于 应 该 包含 URL 地 址 的 输入 域 。 在 提交 表单 
时 ,会 自动 验证 url 域 的 值 。 例 如 : 


Homepage: < input type = "url" name = "user url" /> 


4. 新 型 tel 类 型 input 标签 
也 跟 email 类 型 input 标签 类 似 ,tel 类 型 用 于 应 该 包含 电话 号 码 的 输入 域 。 示 例 代 码 
如 下 。 


< input type = "tel" placeholder = "输入 电话 " name = "phone" /> 


5. 新 型 range 类 型 input 标签 

此 类 型 标签 的 加 入 ,输入 范围 内 的 数据 变 得 非常 简单 容易 ,而 且 非 常 标准 ,用 户 输入 可 
感知 体验 非常 好 。 另 外 ,此 标签 可 以 跟 表 单 新 增加 的 output 标签 一 块 使 用 ,达到 一 个 联动 
的 效果 。 请 看 如 下 的 代码 。 


< form action = "" method = "POST" id= "forml"> 
< input type = "range" min = "0" max = "50" step = "5" name = "rangedemo" value = "0" /> 
< output onforminput = "value = rangedemo. value"> 0 </output > 

</form> 


6. 新 的 日 期 时间、 月 份 . 星 期 input 标签 
如 果 做 过 相关 的 Web 项 目 开发 ,肯定 会 遇 到 相关 的 JavaScript 日 期 控件 。 而 一 系列 版 
本 问题 ,使 用 不 方便 等 问题 将 一 去 不 复 返 ,示例 代码 如 下 。 


< input type = "date" name = "datedemo" /> 


当然 还 有 其 他 的 type, 比 如 month( 月 )、time、week、datetime-local、datetime。 
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7. 新 的 日 期 .时 间 ,月份 .星期 input 标签 
在 之 前 版 本 的 HTML 中 ,颜色 选择 器 实现 起 来 还 是 有 点 儿 困难 的 ,而 现在 一 切 都 变 得 
那么 简单 。 例 如 下 面 的 代码 。 


< input type = "color"/> 


8. input 标签 自动 完成 功能 
如 果 用 户 有 一 定 的 开发 经 验 , 肯 定做 过 相关 的 自动 完成 或 者 输入 提示 功能 。 那 这 将 不 
再 那么 复杂 ,简单 几 个 标签 就 可 自动 实现 此 功能 ,请 看 如 下 代码 。 


< input type = "text" autocomplete = "on" name = "demoAutoComplete" list = "autoNames" /> 
< datalist id = "autoNames"> 

<option value= "Web 开发 " ></option> 

<option value= "手机 开发 " ></option> 

<option value= "算法 实现 " ></option > 
</datalist> 


9. 表单 新 增 属 性 

在 HTML5 中 ,表单 新 增加 的 属性 如 下 。 

1) autocomplete 属性 

autocomplete 属性 可 以 应 用 于 过 form 过 标签 或 者 是 以 下 所 input 过 标签: color, date, 
email, password, range, search, telephone, text 或 url。 该 属性 的 有 效 参数 是 “on”( 默 认 ) 和 
“off”, 

当 autocomplete 属性 设置 为 “on” 时 ,先前 已 经 获得 输入 的 任何 字段 都 会 记得 之 前 输入 
的 值 ,并 将 这 些 值 作为 建议 提供 给 用 户 ,用 户 不 必 再 次 进行 输入 。 

当 autocomplete 属性 设置 为 “off” 时 ,该 功能 是 被 禁止 的 。 在 二 form 二 标签 中 应 用 该 属 
性 时 ,表单 中 的 所 有 相关 字段 都 会 受到 影响 。 当 应 用 于 一 个 二 input 二 标签 时 , 则 只 会 影响 
< 二 input 二 标签 对 应 的 字段 。 下 面 是 使 用 该 属性 的 例子 。 


< form action = "prog. php" method = "post" autocomplete = "on"> 
< input type = "text" name = "field1" autocomplete = "off" /> 
</form> 


所 有 主流 浏览 器 的 最 新 版 本 都 支持 autocomplete 属性 。 

2) autofocus 属性 

autofocus 属性 可 以 应 用 于 任何 二 input 二 标签 ,在 页 面 加 载 时 自动 获得 输入 焦点 。 这 
与 将 光标 放置 于 输入 字段 之 上 具有 相同 效果 ,可 以 方便 用 户 输入 ,或 者 选择 任何 其 他 类 型 的 
字段 为 用 户 的 操作 做 准备 ,该 属性 的 激活 方式 如 下 所 示 。 


< input type = "text" name = "field" autofocus = "autofocus"/> 


除了 I 下, 所 有 主流 浏览 器 的 最 新 版 本 都 支持 autofocus 特性 ,但 可 以 在 网 页 中 安全 地 使 
用 autofocus 属性 ,因为 IE 仍然 可 以 运行 得 很 好 一 一 只 是 不 提供 自动 获得 任何 字段 焦点 的 


功能 而 已 。 

3) form 属性 

应 用 form 属性 就 没有 必要 在 表单 中 放置 二 input 过 标签。 只 要 赋予 表单 一 个 ID, 就 可 
以 将 该 表单 指定 为 form 属性 的 参数 。 

例如 ,下 面 的 代码 打开 然后 关闭 id 为 forml 的 表单 ,在 该 表单 后 一 input 之 标签 链接 了 
该 表单 。 


< form id= "form1" action = "prog. php" method = "post" > 
< input type = "submit" /> 

</form> 

< input type = "text" name = "field" form = "forml"/> 


该 特性 目前 仅 在 Opera 浏览 器 中 可 用 ,因此 在 其 他 主流 浏览 器 能 够 支持 该 特性 之 前 建 
议 不 要 使 用 。 

4) formaction 属性 

formaction 属性 是 一 种 表单 重 载 , 可 以 使 用 它 将 表单 的 action 属性 改 为 不 同 的 目标 。 

例如 在 下 面 的 代码 中 ,表单 不 会 发 送 至 二 form 之 标签 中 指定 的 prog. php 程序 ,而 是 发 
送 至 prog2. php。 


< form action = "prog. php" method = "post"> 

< input type = "text" name = "field"/> 

< input type = "submit" formaction = "prog2.php"/> 
</form> 


当 希 望 提供 不 止 一 个 提交 按钮 时 ,formaction 属性 特别 有 用 ,这 样 需要 提交 至 不 同 目 标 
的 表单 都 可 以 和 不 同 程序 相关 联 。 

表单 重 载 可 以 在 submit 或 者 image 类 型 的 二 input 二 标签 上 运行 ,但 目前 只 有 Opera 
浏览 器 支持 该 特性 ,因此 在 其 他 主要 浏览 器 支持 该 特性 之 前 建议 不 要 使 用 。 

5) formenctype 属性 

formenctype 属性 是 一 种 可 以 改变 表单 的 编码 类 型 (enctype 属性 ) 的 表单 重 载 , 与 
formaction 使 用 方式 相似 (目前 仅 Opera 支持 该 属性 ,因此 目前 不 建议 使 用 ) 。 

6) formmethod 属性 

formmethod 属性 是 一 种 可 以 改变 传送 方法 (method 属性 的 参数 “post? 或 者 “get”) 的 
表单 重 载 ,使 用 方法 与 formaction 相似 (该 属性 目前 只 能 在 Opera 上 运行 ) 。 

7) formnovalidate 属性 

formnovalidate 属性 是 一 种 表单 重 载 , 可 以 使 用 formnovalidate 属性 改变 novalidate 属 
性 的 值 ,使 用 方法 与 formaction 相似 (该 属性 目前 只 能 在 Opera 上 运行 ) 。 

8) formtarget 属性 

formtarget 属性 是 一 种 可 以 改变 target 属性 值 的 表单 重 载 .使 用 方法 与 formaction 相 
似 ( 该 属性 目前 只 能 在 Opera 上 运行 ) 。 

9) height 属性 和 width 属性 

height 属性 和 width 属性 可 以 应 用 于 image 类 型 的 一 input 二 标签 ,用 来 改变 图 像 的 高 
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度 和 宽度 。 这 两 个 属性 可 以 在 所 有 最 新 版 本 的 主要 浏览 器 上 使 用 ,使 用 方法 如 下 。 


< input type = "image" src = "image. png" height = "20" width = "60"/> 


10) list J8 FE .— datalist> FR £ fll< option 13 
有 些 输入 字段 支持 列表 ,可 以 使 用 list 属性 来 引用 这 些 输入 字段 。 例 如 ,下 面 的 代码 使 
用 list 属性 与 新 的 二 datalist 二 标签 一 起 提供 一 个 供 选择 的 URL 组 合 。 


Choose a Web page: < input type = "url" name = "links" list = "sites" /> 
< datalist id= "links"> 

<option label = "Google" value = "http: //google. com" /> 

< option label = "Yahoo! " value = "http: //yahoo. com" /> 

< option label = "Bing" value = "http: //bing.com" /> 

< option label = "Ask" value = "http://ask. com" /> 

</datalist > 


该 特性 与 autocomplete 属性 的 运行 方式 相似 ,不 同 之 处 是 当 输 入 获得 焦点 时 将 会 显示 
用 户 定义 的 建议 选择 列表 。 目 前 仅 Opera 浏览 器 支持 该 特性 ,但 是 用 户 仍然 可 以 在 网 页 中 
使 用 ,因为 其 他 浏览 器 根本 无 法 显示 建议 列表 。 随 着 时 间 的 推移 , 当 其 他 浏览 器 都 支持 该 属 
性 时 使 用 该 特性 的 Web 表单 将 会 变 得 更 快 ,能 够 满足 大 多 数 访 问 者 的 要 求 。 

11) min 属性 

min 属性 用 来 指定 包含 数字 或 者 日 期 的 输入 类 型 的 最 小 值 。 不 建议 依赖 于 该 类 型 的 验 
证 ,因为 只 有 Chrome 和 Opera 浏览 器 支持 该 属性 ,下 面 是 使 用 min 属性 的 一 个 示例 。 


< input type = "time" name = "deliver" value= "09: 00" min = "09: 00"/> 


12) max 属性 
max 属性 用 来 指定 包含 数字 或 者 日 期 的 输入 类 型 的 最 大 值 ,目前 只 有 Chrome 浏览 器 
和 Opera 浏览 器 支持 max 属性 。 可 以 将 min 属性 和 max 属性 组 合 使 用 ,如 下 所 示 。 


< input type = "time" name = "deliver" value = "09: 00" min= "09: 00" max= "17: 00"/> 


13) multiple 属性 

multiple 属性 允许 用 户 在 email 或 file 类 型 的 二 input 二 标签 中 选择 多 个 值 。 除 了 
Internet Explorer 和 Opera, 该 属性 可 以 在 所 有 主要 浏览 器 的 最 新 版 本 上 运行 。 使 用 方式 
如 下 。 


< input type = "file" name = "images" multiple = "multiple"/> 


然后 , 当 浏 览 对 话 框 弹出 时 ,可 以 同时 选择 多 个 文件 (通常 配合 使 用 Ctrl 键 ) 。 而 在 不 
支持 该 特性 的 浏览 器 上 一 次 只 能 选择 一 个 文件 。 

14) novalidate 属性 

novalidate 属性 指定 某 个 表单 在 提交 时 不 应 得 到 验证 。novalidate 属性 的 值 可 以 是 
“true” 或 者 "false”。 目 前 所 有 主流 浏览 器 都 不 支持 novalidate 属性 ,因此 不 能 使 用 。 在 支持 


novalidate 属性 的 浏览 器 上 AJR PE n] PL Py JH F < form > PR £ DA K B F 28 H ftJ — input > PR 
签 : color、date、email、password ,range、search、telephone,text 或 url。 使 用 方式 如 下 。 


< input type = "text" name = "field" novalidate = "true"/> 


一 旦 该 属性 得 到 支持 ,用 户 随 时 都 可 以 使 用 它 , 至 少 HTML5 的 验证 特性 要 优 于 目前 
能 够 提供 的 验证 。 

15) pattern 属性 

可 以 使 用 pattern 属性 在 某 个 输入 字段 中 指定 一 个 正则 表达 式 , 之 后 将 会 计算 该 输入 
字段 的 值 。 该 属性 可 以 应 用 于 下 面 类 型 的 二 input 二 标签 : email, password, search, 
telephone, text 或 url。 例 如 ,如 果 在 某 个 字段 中 只 允许 输入 字母 数字 字符 、 连 字符 .下 划 线 
字符 ,那么 可 以 使 用 下 面 的 HTML。 


< input type = "text" name = "username" pattern= "[ VwN- ] { 6, 16}"/> 


格式 “[\w\-\_]{6,16}” 告 诉 浏览 器 只 接受 下 面 的 字符 。 

(1) \w: a—z A A>Z 的 字母 .0 一 9 的 数字 和 下 划 线 。 

(2) \-: 连 字 符 。 

(3) (6,16); 字符 长 度 在 6 一 16 之 间 。 

然而 ,目前 仅 Opera 浏览 器 和 Chrome 浏览 器 支持 该 特性 。 

16) placeholder 属性 

placeholder 属性 可 以 在 一 个 空白 输入 字段 上 放置 有 用 的 提示 ,使 用 该 属性 可 以 帮助 用 
户 输入 有 效 的 内 容 。 使 用 方式 如 下 。 


< input type = "text" name = "username" size = "35" placeholder = "Enter your 6 - 16 character 
username" /> 


size 属性 的 值 为 35, 可 以 确保 占 位 符 文本 拥有 足够 的 空间 。 在 向 字段 中 输入 内 容 之 前 
以 浅 色 显 示 占 位 符 文 本 。 只 要 字段 获得 焦点 ,提示 消息 将 会 消失 ,准备 输入 文本 。 该 属性 可 
以 应 用 于 以 下 类 型 的 一 input 二 标签 : email.password.search.telephone.text 和 url, 

placeholder 属性 可 以 在 所 有 主流 浏览 器 的 最 新 版 本 上 使 用 .除了 IE 和 Opera。 但 是 该 
属性 可 以 安全 使 用 ,因为 IE 和 Opera 会 简单 地 忽略 该 属性 。 

17) required 属性 

required 属性 用 来 确保 在 表单 提交 之 前 字段 已 经 输入 完毕 ,使 用 方式 如 下 。 


< input type = "number" name = "age" required = "required"/> 


为 了 使 required 属性 正常 运行 ,网 页 的 “1DOCTYPE” 必 须 使 用 “二 !DOCTYPE 
HTML 二 ”( 而 不 是 使 用 任何 的 HTML4. 01 文档 类 型 ) 。 

与 许多 其 他 的 验证 特性 一 样 ,目前 只 有 Chrome 和 Opera Web 浏览 器 支持 该 特性 , 因 
此 对 所 有 Web 表单 的 浏览 器 内 部 验证 来 说 ,required 属性 是 不 可 靠 的 。 
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18) step 属性 
step 属性 用 来 为 包含 数字 或 者 日 期 的 输入 类 型 指定 步 长 值 ,目前 只 有 Chrome 浏览 器 
和 Opera 浏览 器 支持 该 属性 。 下 面 是 将 step 属性 与 min 和 max 属性 组 合 使 用 的 示例 。 


< input type = "time" name= "deliver" value= "09: 00" min= "09: 00" max= "17: 00" step = "3600" /> 


step 属性 的 值 可 以 是 任何 正 整 数 , 上 例 中 step 值 的 单位 是 时 间 秒 。 


2.4 HTML5 文件 操作 


以 前 操作 本 地 文件 都 是 使 用 Flash, Silverlight 或 者 第 三 方 的 ActiveX 插件 等 技术 ,由 
于 使 用 了 这 些 技术 后 就 很 难 进行 跨 平台 或 者 跨 浏览 器 、 跨 设备 等 情况 下 实现 统一 的 表现 ,从 
另外 一 个 角度 来 说 就 是 让 Web 应 用 依赖 了 第 三 方 的 插件 ,而 不 是 很 独立 ,不 够 通用 。 在 
HTML5 标准 中 ,默认 提供 了 操作 文件 的 API 让 这 一 切 直接 标准 化 。 有 了 操作 文件 的 
API, Web 应 用 就 可 以 很 轻松 地 通过 JavaScript 来 控制 文件 的 读 取 、 写 和 文件 夹 ,文件 等 一 
系列 的 操作 ,让 Web 应 用 不 再 那么 整 脚 ,而 之 前 Web 应 用 如 果 不 借助 第 三 方 插件 , 那 基 本 
上 难以 实现 。 但 是 最 新 的 标准 中 大 部 分 浏览 器 都 已 经 实现 了 文件 的 读 取 API, 文 件 的 写 入， 
文件 和 文件 夹 的 最 新 的 标准 刚 制定 完毕 ,相信 后 面 随 着 浏览 器 的 升级 这 些 功能 肯定 会 实现 
得 非常 好 , 接 下 来 主要 介绍 文件 读 取 的 几 个 API。 首 先 介绍 几 个 重要 的 JavaScript 对 象 。 


2.4.1 FileList +£ 


它 是 File 对 象 的 一 个 集合 ,在 HTML4 标准 中 文件 上 传 控 件 只 接受 一 个 文件 ,而 在 新 
标准 中 ,只 需要 设置 multiple 属性 ,就 可 以 支持 多 文件 上 传 ,所 以 从 此 标签 中 获取 的 files 属 
性 就 是 FileList 对 象 实 例 。 例 如 : <input type = "file" multiple =" multiple" name = 
"fileDemo" id="fileDemo" / 盖 。 下 面 是 关于 FileList 对 象 的 API 的 原型 。 


interface FileList { 
getter File? item(unsigned long index); 
readonly attribute unsigned long length; 
}; 


2.4.2 Blob +£ 


Blob 对 象 其 实 就 是 一 个 原始 数据 对 象 , 它 提 供 了 slice 方法 可 以 读 取 原 始 数据 中 的 某 
块 数据 。 另 外 有 两 个 属性 : size( 数 据 的 大 小 )、type( 数 据 的 MIME 类 型 )。 下 面 的 代码 是 
W3C 的 API 原型 。 


interface Blob { 
readonly attribute unsigned long long size; 
readonly attribute DOMString type; 
Blob slice(optional long long start, 
optional long long end, 
optional DOMString contentType); 


2.4.3 File +£ 


File 对 象 继承 自 Blob 对 象 ,指向 一 个 具体 的 文件 , 它 还 有 两 个 属性 : name( 文 件 名 )、 


lastModifiedDate( 最 后 修改 时 间 )。 下 面 看 一 下 W3C 的 标准 。 


interface File: Blob { 
readonly attribute DOMString name; 
readonly attribute Date lastModifiedDate; 
}; 


2.4.4 FileReader + £ 


FileReader 对 象 用 来 读 取 文 件 里 面 的 数据 ,提供 三 个 常用 的 读 取 文件 数据 的 方法 ,另外 


读 取 文件 数据 使 用 了 异步 的 方式 ,非常 高 效 。 下 面 看 一 些 W3C 的 标准 。 


[Constructor] 
interface FileReader: EventTarget { 
// 异 步 读 取 方 法 
void readAsArrayBuffer(Blob blob); 
void readAsBinaryString(Blob blob); 
void readAsText (Blob blob, optional DOMString encoding); 
void readAsDataURL(Blob blob); 
void abort(); 
// 状 态 
const unsigned short EMPTY = 0; 
const unsigned short LOADING = 1; 
const unsigned short DONE = 2; 
readonly attribute unsigned short readyState; 
// 文 件 或 块 数据 
readonly attribute any result; 
readonly attribute DOMError error; 
// 事 件 处 理 属性 
attribute [TreatNonCallableAsNull] Function onloadstart; 
attribute [TreatNonCallableAsNull] Function onprogress; 
attribute [TreatNonCallableAsNull] Function onload; 
attribute [TreatNonCallableAsNull] Function onabort; 
attribute [TreatNonCallableAsNull] Function onerror; 
attribute [TreatNonCallableAsNull] Function onloadend; 
}; 


这 个 对 象 是 非常 重要 的 一 个 对 象 , 它 提供 了 4 个 读 取 文 件数 据 的 方 


法 ,这 些 方法 都 是 以 


异步 的 方式 读 取 数 据 , 读 取 成 功 后 就 直接 将 结果 放 到 属性 result 中 。 所 以 一 般 就 是 直接 读 
取 数据 ,然后 监听 此 对 象 的 onload 事件 ,然后 在 事件 里 面 读 取 result 属性 ,再 做 后 续 处 理 。 


当然 abort 就 是 停止 读 取 的 方法 。 其 他 的 就 是 事件 和 状态 ,不 再 袭 述 。 
对 上 面 三 个 方法 介绍 如 下 。 


readAsBinaryString(Blob blob): 传人 一 个 Blob 对 象 .然后 读 取 数据 的 结果 作为 二 进 


制 字 符 串 的 形式 放 到 FileReader 的 result 属性 中 。 
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readAsText(Blob blob, optional DOMString encoding): 第 一 个 参数 传人 Blog 对 象 ， 
然后 第 二 个 参数 传人 编码 格式 ,异步 将 数据 读 取 成 功 后 放 到 result 属性 中 , 读 取 的 内 容 是 普 
通 的 文本 字符 串 的 形式 。 

readAsDataURL(Blob blob): 传人 一 个 Blob 对 象 , 读 取 内 容 可 以 作为 URL 属性 ,也 
就 是 说 可 以 将 一 个 图 片 的 结果 指向 一 个 img 的 src 属性 。 


2.4.5 文件 操作 实例 


以 前 操作 一 个 图 片 文件 ,都 是 先 将 图 片上 传 到 服务 器 端 ,然后 再 使 用 一 个 img 标签 指 
向 服务 器 的 URL 地 址 ,再 使 用 第 三 方 插件 进行 图 片 处 理 , 而 现在 这 一 切 都 不 需要 服务 器 端 
了 ,因为 FileReader 对 象 提供 的 几 个 读 取 文件 的 方法 变 得 异常 简单 ,而 且 全 不 是 客户 端 
JavaScript 的 操作 。 请 看 下 面 读 取 上 传 文件 内 容 , 然 后 将 文件 内 容 直 接 读 取 到 浏览 器 上 的 
示例 代码 。 


<! DOCTYPE html PUBLIC " — //W3C//DTD XHTML 1. 0 Transitional//EN" 
"http://www. w3. org/TR/xhtm11 /DTD/xhtm11 - transitional. dtd"> 
< html xmlns = "http://www. w3. org/1999 /xhtm1"> 
< head> 
<title></title> 
< script src = "Scripts/jquery— 1.5.1.js" type = "text/javascript"></script > 
< script type = "text/javascript"> 


if(typeof FileReader == "undified") { 
alert(" 您 的 浏览 器 不 行 了 !"); 
} 


function showDataByURL() { 
var resultFile = document. getElementById("fileDemo").files[0]; 
if (resultFile) { 
var reader = new FileReader(); 


reader. readAsDataURL( resultFile); 

reader. onload = function (e) { 
var urlData = this. result; 
document. getElementById ( " result"). innerHTML += "< img src =" + 
urlData + " alt=" + resultFile.name + "/>"; 

); 


) 


function showDataByBinaryString() { 
var resultFile = document.getElementById("fileDemo").files[0]; 
if (resultFile) { 
var reader = new FileReader(); 
// 异 步 方 式 ,不 会 影响 主线 程 


reader. readAsBinaryString(resultFile); 


reader.onload = function(e) ( 

var UrlData = this. result; 

document. getE1ementById("result").innerHTML += urlData; 
J; 


function showDataByText() ( 
var resultFile = document.getElementById("fileDemo").files[0]; 
if (resultFile) ( 
var reader = new FileReader(); 
reader. readAsText (resultFile, "gb2312"); 
reader. onload = function (e) { 
var urlData = this.result; 
document. getElementById("result"). innerHTML += urlData; 
); 


} 
} 
</script> 
</head> 
< body> 


< input type = "file" name= "fileDemo" id= "fileDemo" multiple = "multiple" /> 
< input type = "button" value = "readAsDataURL" id = "readAsDataURL" 
onclick = "showDataByURL( ) ;" /> 
< input type = "button" value = "readAsBinaryString" id= "readAsBinaryString" 
onclick = "showDataByBinaryString();"/> 
< input type = "button" value = "readAsText" id= "readAsText" 
onclick = "showDataByText();"/> 
<div id= "result"> 
</div> 
</body> 
</html> 


总 之 ,有 了 文件 操作 的 API 后 ,让 JavaScript 进一步 地 操作 本 地 文件 的 功能 得 到 空前 的 
加 强 ,HTML5 对 于 客户 端 Web 应 用 得 到 进一步 功能 的 提升 ,HTML5 的 趋势 让 Web 更 加 
富 客 户 端 化 ,而 这 些 都 需要 让 HTML 或 者 JavaScript 变 得 更 加 强大 。 


2.5 E # 


Canvas 的 概念 最 初 是 由 苹果 公司 提出 的 .用 于 在 Mac OS X Webkit 中 创建 控制 板 部 
fF. fE Canvas 出 现 之 前 ,开发 人 员 若 要 在 浏览 器 中 使 用 绘图 API, 只 能 使 用 Adobe 的 
Flash 和 SVG(Scalable Vector Graphics, ,可 伸缩 矢量 图 形 ) 插 件 , 或 者 只 有 IE 才 支持 的 
VML(Vector Markup Language, 矢 量 标记 语言 ) ,以 及 其 他 一 些 稀 奇 古 怪 的 JavaScript 
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技巧 。 

假设 要 在 没有 canvas 元 素 的 条 件 下 绘制 一 条 对 角 线 一 一 听 起 来 似乎 很 简单 ,但 实际 上 
如 果 没 有 一 套 二 维 绘图 API 的 话 ,这 会 是 一 项 相当 复杂 的 工作 。HTML5 中 的 Canvas 能 
够 提供 这 样 的 功能 ,对 浏览 器 端 来 说 此 功能 非常 有 用 ,因此 Canvas 被 纳入 了 HTML5 
规范 。 

起 初 ,苹果 公司 曾 暗示 可 能 会 为 WHATWG(Web Hypertext Application Technology 
Working Group. Web 超 文本 应 用 技术 工作 组 ) 草 案 中 的 Canvas 规范 申请 知识 产权 ,这 在 当 
时 引起 了 一 些 Web 标准 化 追随 者 的 关注 。 不 过 ,苹果 公司 最 终 还 是 按照 W3C 的 免 版 税 专 
利 权 许 可 条 款 公 开 了 其 专利 。 

在 网 页 上 使 用 canvas 元 素 时 , 它 会 创建 一 块 矩 形 区 域 。 默 认 情 况 下 ,该 矩形 区 域 宽 为 
300px, 高 为 150px, 但 也 可 以 自 定义 具体 的 大 小 或 者 设置 canvas 元 素 的 其 他 特性 。 

在 页 面 中 加 入 了 canvas 元 素 后 ,就 可 以 通过 JavaScript 来 自由 地 控制 它 。 可 以 在 其 中 
添加 图 片 .线条 以 及 文字 ,也 可 以 在 里 面 绘图 ,甚至 还 可 以 加 入 高 级 动画 。 

大 多 数 主流 操作 系统 和 框架 支持 的 二 维 绘制 操作 ,HTML5 Canvas API 都 支持 。 如 果 
曾经 有 过 二 维 图 像 编 程 的 经 验 ,那么 会 对 HTML5 Canvas API 感觉 非常 顺手 ,因为 这 个 
API 就 是 参照 既 有 系统 设计 的 。 如 果 没 有 这 方面 的 经 验 , 则 会 发 现 与 这 么 多 年 来 一 直 使 用 
的 图 片 加 CSS 开发 Web 图 形 的 方式 比 起 来 ,Canvas 的 演 染 系统 有 多 么 强大 。 


2.5.1 Canvas 重要 Context 对 象 
(1) 要 使 用 Canvas 来 绘制 图 形 必须 在 页 面 中 添加 Canvas 的 标签 ,例如 : 


< canvas id= "demoCanvas" width= "500" height = "500"><p> 现 在 都 用 htm15 </p> </canvas > 


(2) 当然 只 有 上 面 的 标签 ,只 能 是 创建 好 了 一 个 画布 ,其 中 , width 和 height 属性 就 是 
设置 画布 的 大 小 。id 属性 也 是 必需 的 ,后 面 要 用 id 来 拿 到 当前 的 Canvas 的 DOM 对 象 。 
通过 此 Canvas 的 DOM 对 象 就 可 以 获取 它 的 上 下 文 了 ,Canvas 绘制 图 形 都 是 依靠 Canvas 
对 象 的 上 下 文 对 象 。 例 如 : 


< script type = "text/javascript"> 

// 第 一 步 : 获取 canvas Jú 

var canvasDom = document. getElementById("demoCanvas"); 
// 第 二 步 : 获取 上 下 文 

var context = canvasDom. getContext( "2d" ) ; 

</script > 


(3) Context 上 下 文 默认 有 两 种 绘制 方式 : 绘制 线 (stroke) .填充 (fil)。 注 意 : 决定 了 
使 用 哪 种 方式 之 后 ,在 填充 或 者 绘制 线 之 前 应 先 设置 样式 。 


2.5.2 Canvas 绘制 的 步骤 


Canvas 绘制 的 总 体 步骤 如 下 。 
(1) 创建 HTML 页 面 ,设置 画布 标签 。 


(2) 编写 JavaScript, 获 取 画 布 DOM 对 象 。 

(3) 通过 Canvas 标签 的 DOM 对 象 获 取 上 下 文 。 

(4) 设置 绘制 线 样式 .颜色 。 

(5) 绘制 矩形 ,或 者 填充 矩形 。 

下 面 以 Canvas 绘制 一 个 矩形 和 填充 一 个 矩形 为 例 , 说 明 如 何 使 用 Canvas, 


<body> 
< canvas id= "demoCanvas" width = "500" height = "500"> 
< p> html5 时 代 了 </p> 
</canvas > 
<! -一 下面 将 演示 一 种 绘制 矩形 的 deno---> 
< script type = "text/javascript"> 


// 第 一 步 : 获取 canvas 元 素 

var canvasDom = document. getElementById("demoCanvas"); 
// 第 二 步 : 获取 上 下 文 

var context = canvasDom.getContext("2d"); 

// 第 三 步 : 指定 绘制 线 样式 .颜色 

context. strokeStyle = "red"; 

// 第 四 步 : 绘制 矩形 ,只 有 线 . 内 容 是 空 的 

context. strokeRect(10, 10, 190, 100); 


// 以 下 演示 填充 矩形 . 
context. fillStyle = "blue"; 
context. fi11Rect(110,110,100,100); 
</script> 
</body> 


显示 效果 如 图 2. 3 所 示 。 


图 2.3 绘制 矩形 效果 图 


2.5.3 Canvas 绘制 线条 


Context 对 象 的 beginPath 方法 表示 开始 绘制 路 径 ,moveTo(x,y) 方 法 设置 线段 的 起 
点 ,lineTo(x,y) 方 法 设置 线段 的 终点 ,stroke 方法 用 来 给 透明 的 线段 着 色 。moveTo 和 
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lineTo 方法 可 以 多 次 使 用 。 最 后 ,还 可 以 使 用 closePath 方法 ,自动 绘制 一 条 当前 点 到 起 点 
的 直线 ,形成 一 个 封闭 图 形 ,减少 使 用 一 次 lineTo 方法 ,示例 代码 如 下 。 


<body> 
< canvas id= "demoCanvas" width = "500" height = "600"> 
</canvas > 
< script type = "text/ javascript"> 
// 通 过 id 获得 当前 的 Canvas 对 象 
var canvasDom = document. getElementById("demoCanvas"); 
// 通 过 Canvas DOM 对 象 获取 Context 的 对 象 
var context = canvasDom. getContext("2d"); 


context. beginpath( ) ; // 开 始 路 径 绘 制 
context. moveTo( 20, 20); // 设 置 路 径 起 点 ,坐标 为 (20, 20) 
context. lineTo( 200, 200); // 绘 制 一 条 到 (200,20) 的 直线 


context. lineTo( 400, 20); 
context. closePath( ) ; 


context. lineWidth = 2.0; // 设 置 线 宽 
context. strokeStyle = "#CC0000"; // 设 置 线 的 颜色 
context. stroke( ); // 进 行 线 的 着 色 , 这 时 整 条 线 才 变 得 可 见 
</script> 
</body> 


2.5.4 Canvas 绘制 文本 


Context 上 下 文 对 象 的 fillText(string,x,y) 方 法 是 用 来 绘制 文本 , 它 的 三 个 参数 分 别 
为 文本 内 容 、 起 点 的 x 坐标 、y 坐标 。 使 用 之 前 , 需 用 font 设置 字体 、 大 小 ,样式 (写法 类 似 于 
CSS 的 font 属性 )。 与 此 类 似 的 还 有 strokeText 方法 ,用 来 添加 空心 字 。 另 外 注意 一 点 : 
fillText 方法 不 支持 文本 断 行 , 即 所 有 文本 出 现在 一 行内 。 所 以 ,如 果 要 生成 多 行文 本 ,只 
有 多 次 调用 fillText 方法 ,示例 代码 如 下 。 


< canvas id = "demoCanvas" width = "500" height = "600"></canvas > 
< script type = "text/javascript"> 

// 通 过 id 获得 当前 的 Canvas 对 象 

var canvasDom = document.getElementById("demoCanvas") ; 

// 通 过 Canvas DOM 对 象 获取 Context 的 对 象 

var context = canvasDom. getContext("2d" ) ; 

context. moveTo( 200, 200) ; 


// 设 置 字体 
context. font = "Bold 50px Arial"; 
// 设 置 对 齐 方式 
context. textAlign = "left"; 
// 设 置 填充 颜色 
context. fillStyle = "#005600"; 

// 设 置 字体 内 容 ,以 及 在 画布 上 的 位 置 
context. fillText(" 老 马 !", 10, 50); 
// 绘 制 空 心 字 


context. strokeText( "blog. itjeek.com!", 10, 100); 
</script> 


2.5.5 Canvas 绘制 圆 形 和 桶 圆 


Context 上 下 文 的 arc 方 法 用 于 绘制 圆 形 或 者 椭圆 。arc 方法 的 x 和 y 参数 是 圆心 坐 
标 ,radius 是 半径 ,startAngle 和 endAngle 是 扇形 的 起 始 角度 和 终止 角度 (以 弧度 表示 )， 
anticlockwise 表示 作 图 时 应 该 道 时针 画 (true) 还 是 顺 时 针 画 (false) ,示例 代码 如 下 。 


< canvas id = "demoCanvas" width = "500" height = "600"></canvas > 
< script type = "text/javascript"> 
// 通 过 这 获得 当前 的 Canvas 对 象 
var canvasDom = document. getElementById("demoCanvas"); 
// 通 过 Canvas DOM 对 象 获取 Context 的 对 象 
var context = canvasDom. getContext("2d"); 
context. beginPath( ); // 开 始 绘制 路 径 
// 绘 制 以 (60,60) 为 圆心 ,50 为 半径 长 度 ,从 0 到 360° (FI 是 180 ), 最 后 一 个 参数 代表 顺 时 针 旋 转 
context.arc(60, 60, 50, 0, Math.PI * 2, true); 


context. lineWidth = 2.0; // 线 的 宽度 

context. strokeStyle = "#000"; // 线 的 样式 

context. stroke( ) ; // 绘 制 空 心 的 ,当然 如 果 使 用 fill 那 就 是 填充 了 
</script> 


2.5.6 Canvas 绘制 图 片 


Canvas 绘制 图 片 是 它 的 一 大 特点 。 当 然 配合 File 的 API, 让 JavaScript 变 得 无 可 匹 
敌 。 下 面 演示 一 下 怎样 绘制 图 片 .并且 制 作出 一 个 立体 效果 出 来 ,示例 代码 如 下 。 


< canvas id = "demoCanvas" width = "500" height = "600"></canvas > 
< script type = "text/javascript"> 

// 通 过 过 获得 当前 的 Canvas 对 象 

var canvasDom = document.getElementById("demoCanvas"); 

// 通 过 Canvas DOM 对 象 获取 Context 的 对 象 

var context = canvasDom.getContext("2d"); 


var image = new Image(); // 创 建 一 张 图 片 
image. src = "Images/a. png"; // 设 置 图 片 的 路 径 
image. onload = function() { // 当 图 片 加 载 完成 后 
for (var i = 0; 22 10; try [ // 输 出 10 张 照片 


// 参 数 : (1) 绘 制 的 图 片 (2) 坐 标 x, (3) 坐 标 Y 
context. drawImage( image, 100 + i * 80, 100 + i * 80); 
} 
}; 


</script> 


上 面 介绍 了 Canvas 最 基本 的 用 法 .总体 来 说 ,使 用 Canvas 绘制 图 片 和 文本 、 形 状 都 不 
是 很 难 ,API 代码 上 手 难度 基本 就 是 初级 。 但 是 由 此 而 带 来 的 非常 多 的 可 能 ,让 HTML5 
真正 得 强大 到 无 可 比拟 的 地 步 。 当 然 本 文 并 没有 涉及 Canvas 3D 绘制 的 相关 内 容 , 而 且 关 
于 Canvas 绘制 渐变 色 绘制 阴影 .图 片 的 相关 处 理 操作 等 ,这 些 内 容 如 果 读 者 确实 需要 ,可 
以 直接 阅读 HTML5 的 最 新 标准 文档 。 
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2.6 地 理 位 置 


地 理 位 置 (Geolocation) 是 HTML5 的 重要 特性 之 一 ,提供 了 确定 用 户 位 置 的 功能 , 借 
助 这 个 特性 能 够 开发 基于 位 置信 息 的 应 用 。HTML5 的 地 理 位 置 特性 可 以 返回 网 页 访问 者 
的 地 理 位 置 (或 最 接近 的 位 置 ) , 它 人 允许 用 户 在 Web 应 用 程序 中 共享 位 置 ,使 其 能 够 享受 位 
置 感知 服务 , HTML5 中 使 用 getCurrentPosition ( ) 方 法 来 获得 用 户 的 位 置 。HTML5 
Geolocation 规范 提供 了 一 套 保护 用 户 隐 私 的 机 制 , 必 须 先 得 到 用 户 明确 许可 ,才能 获取 用 
户 的 位 置信 息 。 不 过 ,从 可 接触 到 的 HTML5 Geolocation 应 用 程序 示例 中 可 以 看 到 ,通常 
会 鼓励 用 户 共享 这 些 信 息 。 

本 节 将 首先 介绍 HTML5 Geolocation 位 置信 息 的 构成 : 纬度 、 经 度 ,以 及 获得 这 些 数 
据 的 途径 (GPS、WiFi 和 蜂窝 站 点 )。 然 后 将 讨论 HTML5 地 理 定位 数据 的 隐私 问题 ,以 及 
浏览 器 如 何 使 用 这 些 数据 。 最 后 将 探讨 它 在 实际 中 的 应 用 ,演示 并 帮助 读者 学 会 如 何 使 用 
它 构建 一 个 实用 的 基于 地 理 位 置 的 Web 应 用 

在 HTML5 中 , 当 请 求 一 个 位 置信 息 时 ,如 果 用 户 同意 ,浏览 器 就 会 返回 位 置信 息 ,该 
位 置信 息 是 通过 支持 地 理 定位 功能 的 底层 设备 (比如 笔记 本 或 手机 ) 提 供给 浏览 器 的 。 位 置 
信息 由 纬度 、 经 度 坐标 和 一 些 其 他 元 数据 组 成 。 例 如 ,北京 故宫 的 位 置信 息 主要 由 一 对 纬度 
和 经 度 坐 标 组 成 : 北纬 39.9" ,东经 116.4°, 

经 纬度 坐标 有 两 种 表示 方式 : 十 进 制 格式 (例如 39.9) 和 DMS(Degree Minute Second, 
角度 ) 格 式 ( 例 如 39°54'20”), HTML5 Geolocation API 返回 的 坐标 格式 为 十 进 制 格式 。 除 
了 纬度 和 经 度 坐 标 , HTML5 Geolocation 还 提供 位 置 坐标 的 准确 度 。 除 此 之 外 , 它 还 会 提 
供 其 他 一 些 元 数据 ,比如 海拔 ,海拔 准确 度 .行驶 方向 和 速度 等 ,具体 情况 取决 于 浏览 器 所 在 
的 硬件 设备 。 位 置信 息 一 般 从 如 下 数据 源 获得 : IP 地 址 .三维 坐标 .GPS (Global 
Positioning System, 全 球 定位 系统 )、WiFi、 手 机 信和 号、 用 户 自 定义 数据 。 它 们 各 有 优 缺 点 ， 
如 表 2. 1 所 示 , 为 了 保证 更 高 的 准确 度 , 许 多 设备 使 用 多 个 数据 源 组 合 的 方式 。 


表 2.1 数据 源 
数据 源 优 点 缺 点 
IP 地 址 任何 地 方 都 可 用 ,在 服务 器 端 处 理 不 精确 (经 常 出 错 ,一 般 精 确 到 城市 级 ) ,运算 代 
价 大 
GPS 很 精确 定位 时 间 长 , 耗 电 量 大 ,室内 效果 差 , 需 要 额外 硬 
件 设 备 支持 
WiFi 精确 ,可 在 室内 使 用 ,简单 .快捷 在 乡村 这 些 WiFi 接 人 点 少 的 地 区 无 法 使 用 


手机 信号 ”相当 准确 ,可 在 室内 使 用 ,简单 .快捷 需要 能 够 访问 手机 或 其 Modem 设备 
用 户 自 定义 可 获得 比 程序 定位 服务 更 准确 的 位 置 数 可 能 很 不 准确 ,特别 是 当 用 户 位 置 变更 后 
据 , 用 户 自行 输入 可 能 比 自动 检测 更 快 


2.6.1 浏览 器 支持 情况 


各 浏览 器 对 HTML5 Geolocation 的 支持 程度 不 同 ,并 且 还 在 不 断 更 新 中 。 好 消息 是 : 
在 HTML5 的 所 有 功能 中 ,HTML5 Geolocation 是 第 一 批 被 全 部 接受 和 实现 的 功能 之 一 ， 


相关 规范 已 经 达到 一 个 非常 成 熟 的 阶段 ,不 大 可 能 做 太 大 改变 。 如 表 2.2 所 示 ,很 多 浏览 器 
已 经 支持 HTML5 Geolocation 。 


表 2.2 各 浏览 器 支持 情况 


浏 览 器 支持 情况 
Firefox 3.5 及 以 上 版 本 支持 
Chrome 在 带 有 Gears 的 第 2 版 Chrome 中 被 支持 
Internet Explorer 通过 Gears 插件 支持 
Opera 在 版 本 10 中 支持 
Safari 在 版 本 4 中 支持 以 实现 在 iPhone 上 可 用 


由 于 浏览 器 对 它 的 支持 程度 不 同 , 在 使 用 之 前 最 好 先 检 查 浏 览 器 是 否 支持 HTML5 
Geolocation API。 后 面 将 讲解 如 何 检查 浏览 器 是 否 支 持 此 功能 。 


2.6.2 HTMLS Geolocation API 


在 调用 HTML5 Geolocation API 函数 前 ,需要 确保 浏览 器 支持 此 功能 。 当 浏览 器 不 支 
持 时 ,可 以 提供 一 些 蔡 代 文 本 ,以 提示 用 户 升级 浏览 器 或 安装 插件 (如 Gears) 来 增强 现 有 浏 
览 器 功能 。 以 下 代码 是 浏览 器 支持 性 检查 的 一 种 途径 。 


function testSupport() { 
if (navigator. geolocation) { 
document. getElementById("support"). innerHTML = "支持 HTML5 Geolocation."; 
} else { 
document. getElementById(" support"). innerHTML = 
"该 浏览 器 不 支持 HTML5 Geolocation, 建议 升级 浏览 器 或 安装 插件 (如 Gears)."; 
) 
| 


在 以 上 代码 中 ,testSupport() 函数 检测 了 浏览 器 的 支持 情况 。 这 个 函数 应 该 在 页 面 加 
载 的 时 候 就 被 调用 ,如 果 浏 览 器 支持 HTML5 Geolocation navigator. We 调用 将 返 
回 该 对 象 ,否则 将 触发 错误 。 预 先 定义 的 support 元 素 会 根据 检测 结果 显示 浏览 器 支持 情 
况 的 提示 信息 。 

在 HTML5 Geolocation 功能 中 ,位 置 请 求 有 两 种 : 单 次 位 置 请 求 和 重复 性 位 置 更 新 

单 次 位 置 请 求 : 在 许多 应 用 中 ,只 检索 或 请 求 一 次 用 户 位 置 即 可 。 例 如 ,午餐 时 间 到 
了 ,要 查询 用 户 附 近 餐 馆 的 特色 菜 及 其 价格 和 评论 ,就 可 以 使 用 如 下 代码 所 示 的 HTML5 
Geolocation API。 


void getCurrentPosition(updateLocation, optional handleLocationError, optional options); 


这 个 函数 接受 一 个 必 选 参数 和 两 个 可 选 参数 , 必 选 参数 updateLocation 为 浏览 器 指明 
位 置 数据 可 用 时 应 调用 的 函数 。 获 取 位 置 操作 可 能 需要 较 长 时 间 才 能 完成 ,用 户 不 希望 在 
检索 位 置 时 浏览 器 被 锁定 ,这 个 参数 就 是 异步 收 到 实际 位 置信 息 后 ,进行 数据 处 理 的 地 方 。 
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它 同 时 作为 一 个 函数 ,只 接受 一 个 参数 : 位 置 对 象 position。 这 个 对 象 包含 坐标 (coords) 和 
一 个 获取 位 置 数据 时 的 时 间 截 ,许多 重要 的 位 置 数据 都 包含 在 coords 中 ,比如 : latitude( 纬 
FE) ,longitude( 经 度 ) „accuracy OE MA FE) 。 

毫 无 疑问 ,这 三 个 数据 是 最 重要 的 位 置 数据 。latitude 和 longitude 包含 HTML5 
Geolocation 服务 测定 的 十 进 制 用 户 位 置 。accuracy 以 m 为 单位 制定 纬度 和 经 度 值 与 实际 
位 置 间 的 差距 。 局 限于 HTML5 Geolocation 的 实现 方式 ,位置 只 能 是 粗略 的 近似 值 。 在 呈 
现 返 回 值 前 请 一 定 要 检查 返回 值 的 准确 度 。 如 果 推 荐 的 所 谓 “ 附 近 的 "餐馆 ,实际 上 要 耗费 
用 户 几 个 小 时 的 路 程 , 那 就 不 好 了 。 

坐标 可 能 还 包含 其 他 一 些 数据 ,不 能 保证 浏览 器 对 其 都 支持 ,如 果 不 支持 则 返回 null, 

Q) latitude 一 一 海拔 高 度 , 以 m 为 单位 。 

(2) latitudeAccuracy 一 一 海拔 高 度 的 准确 度 , 以 m 为 单位 。 

(3) heading 一 一 行进 方向 ,相对 于 正 北 而 言 。 

(4) speed 一 一 速度 ,以 m/s 为 单位 。 

以 下 代码 给 出 了 updateLocation O 函数 的 常用 实现 代码 ,该 函数 根据 坐标 信息 执行 具 
体 的 更 新 操作 : 用 获得 的 位 置信 息 分 别 更 新 HTML 页 面 上 三 个 空间 元 素 的 文本 。 


function updateLocation(position) { 
var latitude = position. coords. latitude; 
var longitude = position.coords. longitude; 
var accuracy = position. coords. accuracy; 


document. getElementById( "纬度 "). innerHTML = latitude; 

document. getElementById(" 经 度 "). innerHTML = longitude; 

document. getElementById(" 准 确 度 ") . innerHTML = accuracy + "%"; 
) 


可 选 参数 handleLocationError 为 浏览 器 指明 出 错 处 理 函 数 。 位 置信 息 请 求 可 能 因为 
一 些 不 可 控 因 素 失败 ,这 时 需要 在 这 个 函数 中 提供 对 用 户 的 解释 。 幸 运 的 是 ,该 API 已 经 
定义 了 所 有 需要 处 理 的 错误 情况 的 错误 编号 。 错 误 编号 code 设置 在 错误 对 象 中 ,错误 对 象 
作为 error 参数 传递 给 错误 处 理 程序 。 这 些 错误 编号 有 : 

(1) UNKNOWN_ERROR (0); 不 包括 在 其 他 错误 编号 中 的 错误 ,需要 通过 message 
参数 查找 错误 的 详细 信息 。 

(2) PERMISSION_DENIED (1); 用 户 拒绝 浏览 器 获得 其 位 置信 息 。 

(3) POSITION_UNAVAILABLE (2); 尝试 获取 用 户 信 息 失败 。 

(4) TIMEOUT (3): 在 options 对 象 中 设置 了 timeout 值 .尝试 获取 用 户 位 置 超时 。 

在 这 些 情况 下 ,可 以 通知 用 户 应 用 程序 运行 出 了 什么 问题 ,如 以 下 代码 所 示 。 


function handleLocationError(error) { 
switch (error.code) { 
case 0: 
updateStatus(" 尝 试 获取 您 的 位 置信 息 时 发 生 错误 : ”+ error. message); 
break; 


case 1: 
updateStatus(" 用 户 拒绝 了 获取 位 置信 息 请 求 。"); 
break; 

Case 2: 
updateStatus(" 浏 览 器 无 法 获取 您 的 位 置信 息 。"); 
break; 

Case 3: 
updateStatus(" 获 取 您 位 置信 息 超时 。"); 
break; 
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可 选 参 数 options 对 象 可 以 调整 HTML5 Geolocation 服务 的 数据 收集 方式 。 该 对 象 有 
以 下 三 个 可 选 参数 。 

(1) enableHighAccuracy 一 一 如 果 启 动 该 参数 ,浏览 器 会 启动 HTML5 Geolocation JR 
务 的 高 精确 度 模式 ,这 将 导致 机 器 花费 更 多 的 时 间 和 资源 来 确定 位 置 ,应 谨慎 使 用 。 默 认 值 
为 false。 

(2) timeout 一 一 单位 为 ms, 告 诉 浏览 器 获取 当前 位 置信 息 所 允许 的 最 长 时 间 。 如 果 在 
这 个 时 间 段 内 未 完成 ,就 会 调用 错误 处 理 程序 。 默 认 值 为 Infinity, 即 无 穷 大 (无 限制 ) 。 

(3) maximumAge 一 一 以 ms 为 单位 ,表示 浏览 器 重新 获取 位 置信 息 的 时 间 间 隔 。 默 认 
值 为 0, 这 意味 着 浏览 器 每 次 请 求 时 必须 立即 重新 计算 位 置 。 

使 用 可 选 参数 options 更 新 位 置 请 求 , 让 其 包含 一 个 使 用 JSON 对 象 表示 的 可 选 参数 ， 
如 以 下 代码 所 示 。 


navigator. geolocation. getCurrentPosition(updateLocation, handleLocationError, {timeout: 10000}); 


这 个 调用 告诉 HTML5 Geolocation, 当 获取 位 置 请 求 的 处 理 时 间 超 过 10s(10 000ms) 
时 和 触发 错误 处 理 程序 ,这 时 ,error code 应 该 是 3。 

重复 性 位 置 更 新 请 求 : 有 时 候 , 仅 获取 一 次 用 户 位 置信 息 是 不 够 的 。 比 如 用 户 正在 移 
动 , 随 着 用 户 的 移动 ,页 面 应 该 能 够 不 断 更 新 显示 附近 的 餐馆 信息 ,这 样 ,所 显示 的 餐馆 信息 
才 对 用 户 有 意义 。 幸 运 的 是 , HTML5 Geolocation 服务 的 设计 者 已 经 考虑 到 了 这 一 点 ,应 
用 程序 可 以 使 用 如 下 API 进行 重复 性 位 置 更 新 请 求 , 当 监 控 到 用 户 的 位 置 发 生变 化 时 ， 
HTML5 Geolocation 服务 就 会 重新 获取 用 户 的 位 置信 息 ,并 调用 updateLocation O 函数 处 
理 新 的 数据 ,及 时 通知 用 户 。 以 下 是 重复 性 位 置 更 新 请 求 API: 


void watchPosition(updateLocation, optional handleLocationError, optional options); 


这 个 函数 的 参数 与 前 面 提 到 的 getCurrentPosition 函数 的 参数 一 样 ,不 再 袭 述 。 关 闭 
更 新 也 很 简单 ,如 果 应 用 程序 不 需要 再 接收 用 户 的 位 置 更 新 消息 ,只 需要 使 用 clearWatch() 
函数 。 参 照 下 面 给 出 的 例子 。 


var watchId = navigator.geolocation.watchPosition(updateLocation, 
handleLocationError); 
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// 基 于 持续 更 新 的 位 置信 息 实 现 一 些 功能 … 
// 停 止 接收 位 置 更 新 消息 
navigator. geolocation. clearWatch(watchId) ; 


2.6.3 HTMLS Geolocation API 应 用 实例 


下 面 将 介绍 如 何 用 刚刚 介绍 的 * 重 复 性 位 置 更 
新 请 求 "构建 一 个 简单 有 用 的 Web 应 用 程序 : 距离 
跟踪 器 。 通 过 此 应 用 程序 可 以 了 解 到 HTML5 
Geolocation API 的 强大 之 处 。 想 要 快速 确定 在 
一 定时 间 内 的 行走 距离 ,通常 可 使 用 GPS 导航 
系统 或 计 步 器 这 样 的 专业 设备 。 基 于 HTML5 
Geolocation 提供 的 强大 服务 ,就 可 以 自己 创建 一 
个 网 页 来 跟踪 从 网 页 被 加 载 的 地 方 到 目前 所 在 位 
置 所 经 过 的 距离 。 虽 然 它 在 台式 计算 机 上 不 大 实 
用 ,可 在 手机 上 运行 是 非常 理想 的 。 只 要 在 手机 
浏览 器 中 打开 这 个 示例 页 面 并 授予 其 位 置 访问 的 
权限 ,每 隔 几 秒 钟 ,应 用 程序 就 会 更 新 计算 走 过 的 
距离 ,如 图 2.4 所 示 。 

在 此 实例 中 使 用 的 watchPosition O 函数 刚刚 
在 2. 6.2 节 中 介绍 过 。 每 当 有 新 的 位 置 返回 ,就 将 
其 与 上 次 保存 的 位 置 进 行 比较 以 计算 距离 。 距 离 
计算 使 用 著名 的 Haversine 公式 来 实现 ,这 个 公式 
能 够 根据 经 纬度 计算 地 球 上 两 点 间 的 距离 。 它 的 
JavaScript 实现 如 以 下 代码 所 示 。 

function toRadians(degree) { 


return this * Math.PI / 180; 
j 
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图 2.4 距离 跟踪 应 用 程序 


function distance(latitudel, longitudel, latitude2, longitude2) { 


//R 是 地 球 半 径 (km) 
var R = 6371; 


var deltaLatitude = toRadians(latitude2 - latitudel); 
var deltaLongitude = toRadians(longitude2 - longitudel); 


latitudel 
latitude2 


= toRadians(latitudel); 

= toRadians(latitude2); 

vara = Math. sin(deltaLatitude/2) * 
Math.sin(deltaLatitude/2) + 
Math. cos(latitudel) * 
Math. cos(latitude2) * 


Math. sin(deltaLongitude/2) * 
Math. sin(deltaLongitude/2); 


varc = 2 * Math.atan2(Math.sqrt(a), Math. sqrt(1— a)); 
var d = R * c; 
return d; 


ji 


其 中 ,distance() 函 数 用 来 计算 两 个 经 纬度 表示 的 位 置 间 的 距离 ,可 以 定期 检查 用 户 的 
位 置 , 并 调用 这 个 函数 来 得 到 用 户 的 近似 移动 距离 。 这 里 有 一 个 假设 , 即 用 户 在 每 个 区 间 上 
都 是 直线 移动 的 。 

显示 不 准确 的 位 置信 息 会 给 用 户 提供 误导 ,给 用 户 极其 坏 的 印象 ,认为 应 用 程序 不 可 
靠 , 应 该 尽量 避免 。 因 此 ,就 可 以 通过 position. coords. accuracy 过 滤 掉 所 有 低 精度 的 位 置 
更 新 数据 。 如 以 下 代码 所 示 。 


// 如 果 accuracy 的 值 太 大 ,说 明 它 不 准确 ,不 用 它 计算 距 离 

if (accuracy >= 500) { 
updateStatus(" 这 个 数据 太 不 靠 谱 , 需 要 更 准确 的 数据 来 计算 本 次 移动 距离 。"); 
return; 


最 后 来 计算 移动 距离 ,假设 前 面 已 经 至 少 收 到 了 一 个 准确 的 位 置 , 那 就 更 新 移动 的 总 距 
离 并 显示 给 用 户 ,同时 还 存储 当前 数据 以 备 后面 的 比较 。 如 以 下 代码 所 示 。 


// 计 算 移 动 距离 
if ((lastLat != null) && (lastLong != null)) í 
var currentDistance = distance( latitude, longitude, lastLat, lastLong); 
document. getElementById(" 本 次 移动 距离 "). innerHTML = 
"本 次 移动 距离 : " + currentDistance. toFixed(4) + " P"; 


totalDistance += currentDistance; 

document. getElementById(" 总 计 移动 距离 "). innerHTML = 
"总 计 移动 距离 : " + currentDistance. toFixed(4) + " F"; 

) 


lastLat = latitude; 
lastLong = longitude; 


updateStatus(" 计 算 移动 距离 成 功 ."); 
} 


本 例 完整 代码 如 下 。 


<! DOCTYPE html > 
< head> 
< meta charset = "gbk"> 
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<title> HTML5 Geolocation 距离 跟踪 器 </title> 
</head> 


< body onload = "loadDemo( ) "> 
< h1 > HTML5 Geolocation 距离 跟踪 器 </hl > 
<p id= "status"> 该 浏览 器 不 支持 HTML5 Geolocation.</p> 


< h2 > 当前 位 置 : </h2 > 
<table border = "1"> 
<tr> 
< td width = "40" scope = "col"> 纬 度 </th> 
< td width= "114" id= "latitude">?</td> 
</tr> 
<tr> 
<td> 经 度 </td> 
< td id= "longitude">?</td> 
</tr> 
<tr> 
< td> 准 确 度 </td> 
<td id= "accuracy">?</td> 
</tr> 
</table> 
<h4 id = "currDist"> 本 次 移动 距离 : 0 千 米 </h4 > 
<h4 id= "totalDist"> 总 计 移 动 距离 : 0 千 米 </h4 > 
< script type = "text/javascript"> 
var totalDistance = 0.0; 
var lastLat; 
var lastLong; 


function toRadians(degree) ( 
return this * Math.PI / 180; 


function distance(latitudel, longitudel, latitude2, longitude2) ( 
//R 是 地 球 半 径 (km) 
var R = 6371; 
var deltaLatitude = toRadians(latitude2 — latitudel); 
var deltaLongitude = toRadians(longitude2 - longitudel); 
latitudel = toRadians(latitudel); 
latitude2 = toRadians(latitude2); 
vara = Math.sin(deltaLatitude/2) * 
Math. sin(deltaLatitude/2) + 
Math. cos(latitudel) * 
Math. cos(latitude2) * 
Math. sin(deltaLongitude/2) * 
Math. sin(deltaLongitude/2); 


var c 2 * Math.atan2(Math.sqrt(a),Math.sqrt(1-a)); 
var d = R * c; 
return d; 

$ 

function updateStatus(message) { 
document. getElementById("status"). innerHTML = message; 


} 


function loadDemo() { 
if(navigator. geolocation) { 
updateStatus(" 浏 览 器 支持 HTML5 Geolocation. "); 
navigator. geolocation. watchPosition(updateLocation, handleLocationError, 
{maximumAge:20000}); 


function updateLocation(position) { 
var latitude = position. coords. latitude; 
var longitude = position.coords. longitude; 
var accuracy = position. coords. accuracy; 
document. getElementById("latitude"). innerHTML = latitude; 
document. getElementById("longitude"). innerHTML = longitude; 
document. getElementById( "accuracy"). innerHTML = accuracy; 


// 如 果 accuracy 的 值 太 大 , 则 说 明 它 不 准确 ,不 用 它 计算 距 离 

if (accuracy >= 500) { 
updateStatus(" 这 个 数据 太 不 靠 谱 , 需 要 更 准确 的 数据 来 计算 本 次 移动 距离 。); 
return; 


} 


// 计 算 移动 距离 
if ((lastLat != null) && (lastLong != null)) { 
var currentDistance = distance(latitude, longitude, lastLat, lastLong); 
document. getElementById("currDist"). innerHTML = 
"本 次 移动 距离 : " + currentDistance. toFixed(4) + " P"; 
totalDistance += currentDistance; 
document. getElementById("totalDist"). innerHTML = 
"总 计 移动 距离 : " + currentDistance. toFixed(4) + " P"; 


lastLat = latitude; 

lastLong = longitude; 

updateStatus(" 计 算 移动 距离 成 功 ."); 

} 
function handleLocationError(error) { 

switch(error. code) 
{ 
case 0: 


updateStatus( "尝试 获取 您 的 位 置信 息 时 发 生 错 误 : ”+ error. message); 
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break; 

case 1: 
updateStatus(" 用 户 拒 绝 了 获取 位 置信 息 请 求 。"); 
break; 

Case 2: 
updateStatus(" 浏 览 器 无 法 获取 您 的 位 置信 息 : " + error. message); 
break; 

case 3: 
updateStatus(" 获 取 您 位 置信 息 超时 ."); 
break; 

} 

j 


</script> 
</body> 
</html > 


至 此 已 经 构建 了 一 个 能 够 持续 监控 用 户 位 置 变化 的 示例 应 用 程序 ,几乎 完整 地 演示 了 
Geolocation API 的 使 用 。 不 妨 把 它 放 到 支持 地 理 位 置 定位 的 手机 或 移动 设备 上 ,看 看 一 天 
大 概 能 走 多 少 路 吧 。 


27 Ë 频 


随 着 HTML5 的 出 现 , 发 生 了 一 些 重大 变化 ,特别 是 在 音乐 和 音频 方面 。 开 发 人 员 不 
再 要 求 Web 应 用 程序 访问 者 使 用 Adobe Flash. Apple QuickTime 或 Microsoft Windows 
媒体 播放 器 等 特殊 的 播放 器 。 这 意味 着 用 户 不 必 担 心 是 否 有 最 新 的 兼容 插件 (或 任何 播放 
器 插件 )。 他 们 只 需 打 开 自 己 喜 欢 的 浏览 器 并 聆听 能 发 出 声音 的 任何 内 容 ,如 音乐 有声 读 
物 或 朋友 和 家 人 录制 的 消息 。 下 面 介绍 如 何 利用 这 个 最 新 的 标准 和 浏览 器 功能 。 

HTML5 推出 了 一 个 简单 的 元 素 , 即 一 audio 之 。 使 用 这 个 标签 ,可 以 创建 一 个 可 播放 
声音 文件 的 网 页 。 如 果 读 者 在 HTML 中 使 用 过 过 img 盖 元 素 ,会 发 现 二 audio> 元 素 在 加 载 
外 部 文件 方面 与 其 类 似 。 将 二 audio 二 元 素 和 路 径 或 统一 资源 定位 符 (URL) 包 含 在 音频 文 
件 里 ,并 注 明 该 文件 是 (加 载 页 面 后 便 ) 自 动 播放 还 是 从 播放 器 栏 播放 ,这 样 用 户 可 以 根据 需 
要 打开 或 关闭 声音 。 

浏览 器 制造 商 并 非 都 同意 使 用 某 种 音频 文件 格式 。 对 于 图 像 ,PNG、JPEG 或 GIF 格式 
的 文件 在 任何 浏览 器 上 都 能 加 载 到 网 页 里 。 遗 憾 的 是 ,音频 文件 并 非 如 此 。 表 2. 3 展示 了 
网 页 中 可 以 使 用 的 音频 文件 格式 ,但 是 并 非 所 有 格式 都 能 用 于 所 有 浏览 器 。 例 如 ,Chrome、 
Internet Explorer 9 和 Safari 浏览 器 不 支持 WAV 文件 ,这 是 一 种 使 用 非 压 缩 格 式 且 正在 误 
败 的 标准 。 

表 2.3 音频 文件 格式 


音频 格式 Chrome Firefox IE9 Opera Safari 
OGG 支持 支持 支持 不 支持 不 支持 
MP3 支持 不 支持 支持 不 支持 支持 


WAV 不 支持 支持 不 支持 支持 不 支持 


没有 一 种 通用 的 文件 格式 让 每 个 浏览 器 都 使 用 单个 文件 格式 意味 着 至 少 有 2/5 的 浏览 
器 无 法 播放 某 些 声音 。 这 不 是 无 法 在 单一 音频 标准 中 达成 一 致 的 浏览 器 制造 商 不 妥协 的 问 
题 ,而 是 涉及 专利 权 和 特许 权 使 用 费 的 法 律 和 财务 问题 。 不 受 软件 专利 限制 的 OGG 格式 
旨 在 一 劳 永 逸 地 解决 这 个 问题 。 然 而 ,在 撰写 本 教材 时 ,Opera 和 Safari 都 不 支持 OGG., 
与 OGG 格式 的 文件 相 比 , 可 用 的 WAV 和 MP3 文件 数量 要 更 多 ,因此 毫 无 疑问 ,浏览 器 制 
造 商 考虑 到 了 这 一 点 。MP3 作为 事实 的 标准 是 一 个 很 好 的 解决 方案 。 

鉴于 目前 的 状况 ,用 户 可 能 认为 目前 还 不 是 在 HTML5 页 面 上 使 用 音频 的 黄金 时 刻 。 
在 某 些 方面 可 能 的 确 如 此 ,但 是 HTML5 提供 了 一 个 解决 方案 ,使 用 户 喜 欢 的 浏览 器 能 够 
找到 一 种 兼容 的 格式 。 

与 二 audio 之 标签 结合 使 用 时 ,一 source 之 标签 可 以 岩 套 在 一 audio 二 容器 内 。 假 如 想 在 
网 页 上 插入 音乐 ,首先 需要 获得 三 种 文件 类 型 的 音乐 , 即 OGG、MP3 和 WAV。 将 这 些 音乐 
文件 与 HTML5 文件 放 在 同一 个 文件 夹 内 。 然 后 ,将 每 个 文件 名 放 在 单独 的 二 source 二 标 
签 里 ,并 且 音 频 容 器 中 的 所 有 源 标签 都 由 二 audio 二 二 /audio 二 构成 ,如 下 代码 所 示 。 那 么 ， 
无 论 访问 者 使 用 什么 浏览 器 , 它 都 将 自动 选择 所 读 取 的 第 一 个 文件 类 型 ,并 播放 声音 。 


<audio controls> 

< source src = "1. ogg" /> 
< source src = "2. mp3" /> 
< source src = "3. wav" /> 
</audio> 


一 旦 用 户 决定 要 在 网 站 上 提供 音频 ,将 面临 一 个 有 趣 的 设计 选择 。 每 个 浏览 器 都 有 与 
众 不 同 的 外 观 ,看 起 来 像 是 有 意识 地 故意 使 其 与 众 不 同 。 如 图 2.5 所 示 ,展示 了 这 些 浏览 器 
控件 的 外 观 。 
除了 Chrome 浏览 器 外 ,所 有 浏览 器 都 有 开始 / 暂 = 
停 控件 .进度 条 、 滑 块 、 播 放 秒 数 .音量 /静音 控件 ,还 显 intenet Expiorer9 
示 声 音 文件 的 总 秒 数 。 使 用 HTML5 标准 和 浏览 器 支 
持 , 开 发 人 员 可 以 相信 用 户 将 拥有 与 HTML5 音频 类 ”opera 
似 的 体验 , 因为 浏览 器 控件 是 类 似 的 。 还 可 以 使 用 
Flash 和 Silverlight 等 插件 创建 控件 ,但 是 对 于 不 同 的 
用 户 , 体 验 可 能 会 有 所 不 同 。 
某 些 浏览 器 (如 IE 9) 甚 至 有 自己 的 声音 控制 条 ， Mome 
在 浏览 器 本 身 之 外 运行 。 用 户 打开 有 声音 的 任何 网 站 。 图 2.5 各 浏览 器 音频 控件 外 观 
时 ,他 们 可 以 从 Windows 任务 栏 控制 声音 ,并 能 够 预 
览 当 前 正在 播放 的 声音 。 


2.8 视 频 


HTML5 提供 了 Video 标签 ,通过 HTML5 的 Video 标签 语法 ,就 可 以 快速 地 在 网 页 中 
嵌入 影片 。 但 不 同 浏览 器 所 支持 的 HTML5 影片 格式 (视频 解码 ) 皆 不 同 ,因此 除了 要 具备 
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相关 的 影音 文件 外 ,再 就 是 要 了 解 如 何 让 浏览 器 能 自动 判断 播放 的 格式 , 若 打 开 的 是 TE 浏 
览 器 或 Firefox, 它 会 自动 抓 取 浏 览 器 所 支持 的 格式 文件 。 

Video 标签 含有 src, poster, preload, autoplay, loop, controls, width, height 等 几 个 属 
FPE. k — 4 AREARE <source>, Video 标签 内 除了 可 以 包含 一 source 二 标签 外 ， 
还 可 以 包含 当 指定 的 视频 都 不 能 播放 时 返回 的 内 容 。 

1. src 属性 和 poster 属性 

sre 属性 用 于 指定 视频 的 地 址 。 而 poster 属性 用 于 指定 一 张 图 片 ,在 当前 视频 数据 无 
效 时 显示 (预览 图 )。 视 频数 据 无 效 可 能 是 视频 正在 加 载 , 可 能 是 视频 地 址 错误 等 。 如 以 下 
示例 代码 。 


< video width = "658" height = "444" src= "1.mp4" poster = "1.png" 
autoplay = "autoplay"></video> 


2. preload 属性 
此 属性 用 于 定义 视频 是 否 预 加 载 。 属 性 有 三 个 可 选择 的 值 : none metadata auto。 如 
果 不 使 用 此 属性 ,默认 为 auto, 如 下 面 的 代码 。 


< video width = "658" height = "444" src= "1.mp4" poster = "1.png" 
autoplay = "autoplay" preload = "none"></video > 


(1) none; 不 进行 预 加 载 。 使 用 此 属性 值 , 可 能 是 页 面 制作 者 认为 用 户 不 期 望 此 视频 ， 
或 者 减少 HTTP 请 求 。 

(2) metadata: 部 分 预 加 载 。 使 用 此 属性 值 ,代表 页 面 制作 者 认为 用 户 不 期 望 此 视频 ， 
但 为 用 户 提 供 一 些 元 数据 (包括 尺寸 .第 一 帧 .曲目 列表 、 持 续 时 间 等 ) 。 

(3) auto: 全 部 预 加 载 。 

3. autoplay 属性 

autoplay 属性 用 于 设置 视频 是 否 自动 播放 ,是 一 个 布尔 属性 。 当 出 现时 ,表示 自动 播 
放 , 去 掉 时 表示 不 自动 播放 ,如 下 面 的 代码 。 


< video width = "658" height = "444" src = "1.mp4" poster = "1.png" 
autoplay = "autoplay" preload = "none"></video > 


注意 ,HTML 中 布尔 属性 的 值 不 是 true 和 false。 正 确 的 用 法 是 ,在 标签 中 使 用 此 属性 
表示 true, 此 时 属性 要 么 没有 值 ,要 么 其 值 恒 等 于 它 的 名 字 ( 此 处 ,自动 播放 为 二 video 
autoplay/ 记 或 者 二 video autoplay ="autoplay"/ >); 而 在 标签 中 不 使 用 此 属性 表示 false 
(此 处 不 进行 自动 播放 为 二 video/ 记 )。 

4. loop 属性 

loop 属性 用 于 指定 视频 是 否 循环 播放 ,同样 是 一 个 布尔 属性 ,如 下 面 的 代码 。 


< video width = "658" height = "444" src= "1.mp4" poster = "1. png" 
autoplay = "autoplay" loop = "loop"></video > 


5. controls 属性 

controls 属性 用 于 向 浏览 器 指明 页 面 制作 者 没有 使 用 脚本 生成 播放 控制 器 ,需要 浏览 
器 启用 本 身 的 播放 控制 栏 。 控 制 栏 须 包括 播放 暂停 控制 ,播放 进度 控制 ,音量 控制 等 。 每 个 
浏览 器 默认 的 播放 控制 栏 在 界面 上 不 一 样 , 如 下 面 的 代码 。 


< video width = "658" height = "444" src = "1.mp4" poster = "1. png" 
autoplay = "autoplay" preload = "none" controls = "controls"></video> 


6. width 属性 和 height 属性 

这 两 个 属于 标签 的 通用 属性 ,用 于 设置 宽度 和 高 度 。 

7. source 标签 

source 标签 用 于 给 媒体 (因为 audio 标签 同样 可 以 包含 此 标签 ,所 以 这 里 用 于 媒体 ,而 
不 是 视频 ) 指 定 多 个 可 选择 的 (浏览 器 最 终 只 能 选 一 个 ) 文 件 地 址 , 且 只 能 在 媒体 标签 没有 使 
用 src 属性 时 使 用 。 浏 览 器 按 source 标签 的 顺序 检测 标签 指定 的 视频 是 否 能 够 播放 (可 能 
是 视频 格式 不 支持 ,视频 不 存在 等 ) ,如 果 不 能 播放 , 换 下 一 个 。 此 方法 多 用 于 兼容 不 同 的 济 
览 器 。source 标签 本 身 不 代表 任何 含义 ,不 能 单独 出 现 , 如 下 面 的 代码 。 


< video width = "658" height = "444" poster = "1.png" autoplay = "autoplay" 
preload = "none" controls = "controls">< source src = "1.ogv" />< source 
src= "1.ogg" /></video> 


此 标签 包含 src.type.media 三 个 属性 。 

(1) src 属性 : 用 于 指定 媒体 的 地 址 ,和 video 标签 的 一 样 。 

(2) type 属性 : 用 于 说 明 src 属性 指定 媒体 的 类 型 ,帮助 浏览 器 在 获取 媒体 前 判断 是 否 
支持 此 类 别 的 媒体 格式 。 

(3) media 属性 : 用 于 说 明 媒 体 在 何 种 媒介 中 使 用 ,不 设置 时 默认 值 为 all, 表 示 支 持 所 
有 媒介 。 


2.9 SVG 


可 缩放 矢量 图 形 (Scalable Vector Graphics,SVG) 是 基于 矢量 的 图 形 家 族 的 一 部 分 。 
它们 与 基于 光栅 的 图 形 不 同 , 后 者 在 一 个 数据 数组 中 存储 每 个 像素 的 颜色 定义 。 如 今 网 络 
上 使 用 的 最 常见 的 光栅 图 形 格式 包括 JPEG .GIF 和 PNG ,每 种 格式 都 具有 优 缺 点 。 其 他 图 
片 格式 缩写 词 有 : GIF( 图 形 交 换 格式 )JPEG( 联 合 图 像 专家 组 )、.PNG( 可 移植 网 络 图 形 )、 
SVG( 可 缩放 矢量 图 形 )。 相 比 任何 基于 光栅 的 格式 ,SVG 具有 多 项 优势 。 

SVG 图 形 是 使 用 数学 公式 创建 的 ,需要 在 源 文件 中 存储 的 数据 要 少 得 多 ,因为 无 须 存 
储 每 个 独立 像素 的 数据 。 

矢量 图 形 可 更 好 地 缩放 。 对 于 网 络 上 的 图 像 ,尝试 从 原始 大 小 放大 图 像 可 能 产生 失真 
(或 像素 化 的 ) 图 像 。 原 始 像素 数据 是 针对 特定 大 小 进行 设计 的 。 当 图 像 不 再 是 该 大 小 时 ， 
显示 图 像 的 程序 会 猜测 使 用 何 种 数据 来 填充 新 的 像素 。 矢 量 图 像 具 有 更 高 的 弹性 ; 当 图 像 
大 小 变化 时 ,数据 公式 可 相应 地 调整 。 
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源 文件 大 小 可 能 更 小 ,所 以 SVG 图 形 比 其 他 光栅 图 形 的 加 载 速度 更 快 ,使 用 的 带宽 
更 少 。 

SVG 图 像 由 浏览 器 泻 染 ,可 以 以 编程 方式 绘制 。SVG 图 像 可 动态 地 更 改 , 这 使 它们 万 
其 适合 数据 驱动 的 应 用 程序 ,比如 图 表 。 

SVG 图 像 的 源 文件 是 一 个 文本 文件 ,所 以 它 具 有 易于 访问 和 搜索 引擎 友好 的 特征 。 

本 节 将 介绍 SVG 格式 的 优势 ,以 及 它们 如 何在 HTML5 中 的 Web 设计 工作 中 提供 
帮助 。 


2.9.1 SVG 基础 


要 创建 SVG 图 形 , 就 会 经 历 与 创建 JPEG、GIF 或 PNG 文件 完全 不 同 的 流程 。JPEG 、 
GIF 和 PNG 文件 通常 使 用 图 像 编辑 程序 创建 ,比如 Adobe Photoshop, SVG 图 像 通常 使 
用 基于 XML 的 语言 创建 。 有 一 些 SVG 编辑 GUI 将 为 用 户 生 成 基础 的 XML。 但 是 ,对 于 
本 文 , 假 设 用 户 使 用 的 是 原始 的 XML。 请 参见 参考 资料 获取 有 关 SVG 编辑 程序 的 信息 。 
以 下 代码 给 出 了 一 个 简单 SVG XML 文件 的 示例 ,该 文件 绘制 一 个 具有 2px 宽 的 黑色 
边框 的 红色 圆 形 。 显 示 效 果 如 图 2.6 所 示 。 


< svg xmlns = "http://www. w3. org/2000/svg" version = "1.1"> 
<circle cx="100" cy= "50" r= "40" stroke = "black" stroke- width= "2" fill = "red" /> 
</svg> 


2.6 简单 SVG XML 文件 的 示例 


2.9.2 创建 基本 形状 


对 于 SVG 图 形 ,需要 使 用 XML 标记 来 创建 形状 。 表 2.4 给 出 了 这 些 XML 元 素 。 
表 2.4 XML 元 素 


元 素 描述 元 素 描 述 
line 创建 一 条 简单 的 线 ellipse 创建 一 个 椭圆 
polyline 定义 由 多 个 线 定义 构成 的 形状 polygon 创建 一 个 多 边 形 
rect 创建 一 个 矩形 path 支持 任意 路 径 的 定义 
circle 创建 一 个 圆 形 


1. line 元 素 
line 元 素 是 基本 的 绘图 元 素 。 以 下 代码 展示 了 如 何 创建 一 条 水 平 线 , 显 示 效 果 如 图 2.7 
所 示 。 


< svg xmlns = "http://www. w3. org/2000/svg" version = "1.1" 
width= "100 % " height = "100 % " > 
< line x1 = "25" y1 = "150" x2 = "300" y2 = "150" 
style = "stroke:red;stroke — width:10"/> 
</svg> 


图 2.7 水 平 线 


根 SVG 标记 具有 宽度 和 高 度 属性 ,用 于 定义 可 用 于 绘制 的 画布 区 域 。 它 们 的 原理 类 似 
于 其 他 HTML 元 素 的 宽度 和 高 度 属 性 。 在 本 例 中 ,画布 设置 为 占据 所 有 可 用 空间 。 

该 示例 还 使 用 了 style 标记 。SVG 图 形 支持 使 用 多 种 方法 设置 其 内 容 的 样式 。 本 文中 
的 样式 可 用 于 使 它们 变 得 显眼 ,也 可 在 必须 使 用 某 些 属性 (比如 笔画 颜色 和 宽度 ) 才 能 泻 染 
图 像 时 使 用 。 

要 创建 一 个 线 定义 ,可 以 定义 相对 于 画布 的 开始 和 结束 x 和 y 坐标 。xl 和 yl 属性 是 
开始 坐标 ,x2 和 y2 属性 是 结束 坐标 。 要 更 改线 的 方向 ,只 需 更 改 这 些 坐 标 。 例 如 ,通过 修 
改 上 一 个 示例 ,可 以 生成 一 条 对 角 线 ,如 以 下 代码 所 示 , 显 示 效 果 如 图 2.8 所 示 。 


< svg xmlns = "http://www. w3. org/2000/svg" version = "1.1" 
width = "100 % " height = "100 % " > 
< line xl = "0" yl = "0" x2 = "200" y2 = "200" style = "stroke:red;stroke - width:10"/> 
</svg> 


图 2.8 对 角 线 


2. polyline 元 素 
多 直线 图 形 是 一 个 由 多 个 线 定义 组 成 的 图 形 。 以 下 的 代码 中 创建 了 一 个 类 似 一 组 楼 梯 
的 图 形 ,显示 效果 如 图 2.9 所 示 。 


< svg xmlns = http://www. w3. org/2000/svg width = "100 % " height = "100 % " version = "1.1"> 
< polyline points = "0,40 40,40 40,80 80,80 80,120 120,120 120,160" 
style = "fill:white; stroke: red; stroke — width:4" /> 
</svg> 


要 创建 一 个 多 直线 图 形 ,可 以 使 用 points 属性 并 定义 由 逗号 分 隔 的 x 和 y 坐标 对 。 在 
本 例 中 ,第 一 个 点 定义 为 0.40, 其 中 0 是 x 值 ,40 是 y 值 。 但 是 ,单独 一 组 点 无 法 在 屏幕 上 
显示 任何 东西 ,因为 这 仅 告诉 SVG 泻 染 器 从 何 处 开始 。 在 最 低 限 度 上 ,需要 两 组 点 : 一 个 
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图 2.9 多 直线 


开始 点 和 一 个 结束 点 (例如 points 王 "0.40 40,40”). 
与 简单 的 线 图 形 一 样 ,这 些 线 不 需要 完全 水 平 或 垂直 。 如 果 更 改 上 一 个 示例 中 的 值 , 如 
以 下 的 代码 所 示 ,可 以 生成 不 规则 的 线形 状 , 如 图 2. 10 所 示 。 


< svg xmlns = "http://www. w3. org/2000/svg" width = "100 % " height = "100 % " 
version = "1.1"> 
< polyline points = "20,20 40,25 60,40 80,120 120,140 200,180" 
style = "fill:white;stroke:red;stroke- width:3"/> 
</svg> 


2.10 不 规则 形状 


3. rect 元 素 

创建 一 个 矩形 非常 简单 ,只 需 定义 宽度 和 高 度 , 如 以 下 代码 所 示 , 显 示 效 果 如 图 2. 11 
所 示 。 

< svg xmlns = http://www. w3. org/2000/svg width = "100 % " height = "100 $ " 


version= "1.1"> 
< rect width = "300" height = "100" style= "fill:red"/> 


</svg> 


图 2.11 EJE 
同样 ,也 可 以 使 用 rect 标记 创建 一 个 正方 形 , 正 方形 就 是 高 和 宽 相 等 的 矩形 。 
4. circle 元 素 
要 创建 一 个 圆 ,可 以 定义 圆心 的 x 和 y 坐标 和 一 个 半径 ,如 以 下 代码 所 示 ,显示 效果 如 
图 2.12 所 示 。 


< svg xmlns = "http://www. w3. org/2000/svg" version = "1.1"> 
<circle cx = "100" cy = "50" r = "40" fi11 = "red" /> 
</svg> 


cx 和 cy 属性 定义 圆心 相对 于 绘图 画布 的 位 置 。 因 为 半径 是 圆 宽 


义 半 径 时 ,请 记 住 图 像 的 总 宽度 将 是 该 值 的 两 倍 。 
5. ellipse 元 素 


度 的 一 半 , 所 以 在 定 


椭圆 基本 上 是 一 个 圆 , 其 中 的 代码 定义 了 两 个 半径 ,如 以 下 代码 所 示 , 显 示 效 果 如 图 2. 13 


所 示 。 


< svg xmlns = "http://www. w3. org/2000/svg" version= "1.1"> 


<ellipse cx = "300" cy= "80" rx= "100" ry= "50" style= "fill:red;"/> 


</svg> 


图 2.12 A 图 2.13 椭圆 


再 次 说 明 ,cx 和 cy 属性 定义 了 相对 于 画布 的 中 心 坐标 。 但 是 对 于 椭圆 ,需要 使 用 rx 和 


ry 属性 为 x 轴 定义 一 个 半径 ,为 y 轴 定义 一 个 半径 。 
6. polygon 元 素 
多 边 形 这 个 形状 包含 至 少 三 条 边 。 以 下 代码 创建 了 一 个 简单 的 
2.14 所 示 。 
< svg xmlns = "http://www. w3. org/2000/svg" version= "1.1"> 
< polygon points = "200, 10 250,190 160, 210" 


style = "fill:red;stroke:black; stroke — width:1" /> 
</svg> 


图 2.14 多 边 形 


:角形 ,显示 效果 如 图 


HTML5 5## Web 


Th ro g 


移动 Web 开发 其 大 


类 似 于 polyline 元 素 , 可 使 用 points 属性 定义 几 对 x 和 y 坐标 来 创建 多 边 形 。 可 以 通 
过 添加 x M y 对 ,创建 具有 任意 多 条 边 的 多 边 形 。 通 过 修改 上 一 个 示例 ,可 以 创建 一 个 四 边 
形 , 如 以 下 代码 所 示 , 显 示 效 果 如 图 2. 15 所 示 。 


< svg xmlns = "http://www. w3. org/2000/svg" version = "1.1"> 
< polygon points = "220, 10 300,210 170,250 123,234" 
style = "fill:red; stroke:black; stroke — width:1"/> 
</svg> 


2.15 四 边 形 


甚至 可 以 使 用 polygon 标记 创建 复杂 的 形状 。 如 以 下 代码 所 示 , 显 示 效 果 如 图 2. 16 
所 示 。 


< svg xmlns = "http://www. w3. org/2000/svg" version = "1.1"> 
< polygon points = "100,10 40,180 190,60 10,60 160,180 100,10" 
style = "fill:red;stroke:black; stroke — width:1" /> 
</svg> 


图 2.16 五 角 星 


7. path 元 素 

使 用 path 元 素 ( 所 有 绘图 元 素 中 最 复杂 的 ) ,可 以 使 用 一 组 专门 的 命令 创建 任意 图 形 。 
path 元 素 支持 表 2.5 中 的 命令 。 

能 以 大 写 或 小 写 形式 使 用 这 些 命令 。 当 命令 为 大 写 时 ,应 用 绝对 位 置 。 当 它 为 小 写 时 ， 
应 用 相对 位 置 。 提 供 所 有 命令 示例 已 超出 了 本 文 的 范围 。 但 是 ,以 下 示例 会 演示 它们 的 基 
本 使 用 。 


32.5 path 元 素 支 持 的 命令 


命 令 描 æ 命 令 #W Æ 
M 移动 到 s 使 用 平滑 曲线 连接 到 
L 连 线 到 Q 使 用 二 次 贝 塞 尔 曲线 连接 到 
H 水 平 连 线 到 T 使 用 平滑 的 二 次 贝 塞 尔 曲线 连接 到 
V 垂直 连 线 到 A 使 用 椭圆 曲线 连接 到 
C 使 用 曲线 连接 到 z 将 路 径 封闭 到 


可 以 使 用 path 元 素 从 本 文 前 面 的 示例 创建 任何 简单 的 形状 。 以 下 代码 使 用 path 元 素 
创建 了 一 个 基本 的 三 角形 ,显示 效果 如 图 2. 17 所 示 。 
< svg xmlns = "http://www. w3. org/2000/svg" version = "1.1"> 


< path d = "M150 0 L75 200 L225 200 Z" style = "fill:red"/> 
</svg> 


图 2.17 三 角形 


这 组 命令 使 用 d 属 性 定义 。 在 本 例 中 ,从 x 坐标 150 和 y 坐标 0 处 开始 绘制 ,这 在 移动 
到 命令 (M150 0) 中 定义 。 然 后 再 使 用 “ 连 线 到 ”命令 绘制 一 条 直线 连接 到 x 坐标 75 和 y 坐 
标 200 的 位 置 (L75 200)。 接 下 来 ,使 用 另 一 个 “ 连 线 到 ”命令 绘制 男 一 条 线 (L225 200)。 最 
后 ,使 用 “封闭 到 ”命令 封闭 图 形 (Z)。Z 命令 没有 提供 任何 坐标 ,因为 要 关闭 所 在 的 路 径 , 根 
据 定义 ,要 绘制 一 条 从 当前 位 置 到 图 形 起 点 (在 本 例 中 为 x=150 y 一 0) 的 线 。 

这 里 的 意图 是 展示 一 个 基本 示例 ,如 果 想 绘制 的 只 是 一 个 简单 的 三 角形 ,最 好 使 用 
polygon 标记 。 

path 元 素 的 真正 强大 之 处 是 创建 自 定义 形状 的 能 力 ,如 以 下 代码 所 示 , 显 示 效 果 如 
图 2.18 所 示 。 


< svg xmlns = "http://www. w3. org/2000/svg" version = "1. 1"> 
< path d = "M300, 200 h- 150 a150,150 0 1,0 150, ~ 150 z" 
fill = "red" stroke = "blue" stroke - width = "5" /> 
< path d = "M275,175 v - 150 a150,150 0 0,0 -150,150 z" 
fill = "yellow" stroke = "blue" stroke- width = "5" /> 
< path d = "M600, 350 1 50, - 25 
a25,25 = 300,1 50, -25 1 50, -25 
a25,50 —30 0,150, -25 150, — 25 
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a25,75 -30 0,1 50, - 25 1 50, - 25 
a25,100 -30 0,1 50, - 25 1 50, — 25" 
fill = "none" stroke = "red" stroke- width = "5"/> 


d 


</svg> 


2.18 创建 自 定义 形状 


使 用 path 元 素 , 可 以 创建 复杂 的 图 形 ,比如 图 表 和 波浪 线 。 请 注意 ,这 个 示例 使 用 了 多 
个 path 元 素 。 当 创建 图 形 时 , 根 SVG 标记 中 可 以 包含 多 个 绘图 元 素 。 


2.9.3 tigi HME 


除了 目前 为 止 许多 示例 中 的 基本 CSS 样式 ,SVG 图 形 还 支持 使 用 过 滤器 和 渐变 。 本 
节 将 介绍 如 何 向 SVG 图 形 应 用 过 滤器 和 渐变 。 

可 以 使 用 过 滤器 向 SVG 图 形 应 用 特殊 的 效果 。SVG 支持 以 下 过 滤器 : feBlend、 
feColorMatrix feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, 
feDisplacementMap, feFlood, feGaussianBlur, felmage, feMerge, feMorphology. feOffset、 
feSpecularLighting ,feTile ,feTurbulence,feDistantLight ,fePointLight ,feSpotLight 等 。 

以 下 代码 创建 了 一 种 应 用 到 矩形 上 的 投影 效果 ,显示 效果 如 图 2. 19 所 示 。 


< svg xmlns = "http://www. w3. org/2000/svg" version = "1.1"> 
< defs> 
<filter id= "fl" x="0" y="0" width= ("200 %" height = "200 % "> 
< fe0ffset result = "offOut" in="SourceAlpha" dx= "20" dy = "20"/> 
< feGaussianBlur result = "blur0ut" in = "offOut”stdDeviation = "10"/> 
< feBlend in = "SourceGraphic" in2 = "blurOut" mode = "normal" /> 
</filter> 
</defs > 
< rect width = "90" height = "90" stroke = "green" 
stroke- width= "3" fill = "yellow" filter = "url(#f1)"/> 
</svg> 


图 2.19 8066543232 H 


过 滤器 在 defs( 表 示 定 义 ) 元 素 中 定义 。 本 示例 中 的 过 滤器 分 配 了 一 个 id 为 “f1”。 
filter 标记 本 身 拥有 定义 过 滤器 的 x 和 y 坐标 及 宽度 和 高 度 的 属性 。 在 filter 标记 中 ,可 以 
使 用 想 要 的 过 滤器 元 素 并 将 其 属性 设置 为 想 要 的 值 。 

定义 过 滤器 之 后 ,使 用 filter 属性 将 它 与 一 个 特定 图 形 关联 ,如 rect 元 素 中 所 示 。 将 
url 值 设 置 为 用 户 分 配给 过 滤器 的 id 属性 的 值 。 

渐变 是 从 一 种 颜色 到 另 一 种 颜色 逐渐 的 过 渡 。 渐 变 具有 两 种 基本 形式 : 线性 和 径 向 渐 
变 。 所 应 用 的 渐变 类 型 由 用 户 使 用 的 元 素 确 定 。 以 下 示例 展示 了 应 用 于 一 个 椭圆 形 的 线性 
和 径 向 渐变 。 显 示 效 果 如 图 2.20 和 图 2. 21 所 示 。 


< svg xmlns = "http://www.w3.org/2000/svg" version = "1.1"> 
< defs> 
< linearGradient id= "gradl" x1 = "0 % " yl = "0 %" x2= "100 %" y2 = "0 % "> 
< stop offset = "0 % " style = "stop - color : rgb( 255, 255, 0) ; stop - opacity:1"/> 
< stop offset = "100 % " style = "stop - color:rgb(255,0,0) ;stop - opacity:1"/> 
</linearGradient > 
</defs> 
< ellipse cx = "200" cy= "70" rx= "85" ry= "55" fill= "ur1(#grad1)"/> 
</svg> 


2.20 线性 渐变 椭圆 


< svg xmlns = "http://www. w3. org/2000/svg" version = "1.1"> 
< defs> 
< radia1Gradient id= "gradl" cx="50%"cy="50%" r="50%" fx="50%" fy="50%"> 
< stop offset = "0 % " style = "stop - color:rgb(255,255,255);stop - opacity:0"/> 
< stop offset = "100 % " style = "stop - color:rgb(255,0,0) ; stop - opacity:1"/> 
</radialGradient > 
</defs > 
< ellipse cx = "200" cy = "70" rx= "85" ry= "55" fill = "ur1( # grad1)" /> 
</svg> 


2.21 径 向 渐变 椭圆 


T ro 避 
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像 过 滤器 一 样 ,渐变 在 defs 元 素 内 定义 。 每 个 渐变 分 配 有 一 个 id。 渐 变 属性 (比如 颜 
色 ) 可 使 用 stop 元 素 在 渐变 标记 内 设置 。 要 将 渐变 应 用 于 图 形 , 可 以 将 fill 属性 的 url 值 设 
置 为 想 要 的 渐变 的 id。 


2.9.4 SVG 与 文本 
除了 基本 形状 ,还 可 以 使 用 SVG 生成 文本 ,如 以 下 代码 所 示 ,显示 效 果 如 图 2. 22 所 示 。 


< svg xmlns = "http://www. w3. org/2000/svg" version = "1.1"> 
< text x= "0" y= "15" fill = "red"> I love SVG</text > 
</svg> 


Ilove SVG 


图 2.22 SVG 文本 


此 示例 使 用 了 一 个 text 元 素来 创建 句子 “I love SVG”, MEH text 元 素 时 ,要 显示 的 
实际 文本 在 开始 和 结束 text 元 素 之 间 。 

可 以 沿 多 个 轴 , 以 及 甚至 沿 多 条 路 径 显示 文本 。 以 下 代码 沿 一 条 弧 形 路 径 显 示 文 本 , 显 
示 效 果 如 图 2.23 所 示 。 


< svg xmlns = "http://www. w3. org/2000/svg" version= "1.1" 
xmlns:xlink = "http://www. w3. org/1999/xlink"> 
<defs> 
<path id= "path1" d= "M75,20 al,1 0 0,0 100,0"/> 
</defs> 
< text x="10" y= "100" style = "fill:red;"> 
< textPath xlink:href = " # path1"> I love SVG I love SVG </textPath> 


</text> 
</svg> 

í a 
Sor 


图 2.23 沿 弧 形 路 径 显 示 文 本 


在 此 示例 中 ,向 根 SVG 标记 添加 了 一 个 额外 的 XML 命名 空间 xlink。 用 户 显 示 文 本 
的 弧 形 路 径 在 defs 元 素 内 创建 ,所 以 该 路 径 不 会 在 图 形 中 实际 演 染 出 来 。 要 显示 的 文本 府 
套 在 一 个 textPath 元 素 内 ,该 元 素 使 用 xlink 命名 空间 引用 想 要 的 路 径 的 id。 

与 其 他 SVG 图 形 一 样 ,也 可 以 向 文本 应 用 过 滤器 和 渐变 。 以 下 代码 向 一 些 文本 应 用 了 
一 个 过 滤器 和 一 种 渐变 ,显示 效果 如 图 2. 24 所 示 。 


p—_ 


< svg xmlns = "http://www. w3. org/2000/svg" version= "1.1" 
xmlns:xlink = "http://www. w3. org/1999/xlink"> 


< defs> 
< radialGradient id = "gradl" cx="50%" cy="50%" r="50%" fx="50%" fy="50% "> 
< stop offset = "0 % "style = "stop - color:red; stop - opacity:0"/> 
< stop offset = "100 % " style = "stop - color:rgb(0,0,0);stop - opacity:1"/> 
</radialGradient > 
< filter id= "fl" x="0" y= "0" width= "200 % " height = "200 % "> 
< fe0ffset result = "offOut" in = "SourceAlpha" dx = "20" dy= "20"/> 
< feGaussianBlur result = "blurOQut" in= "offOut" stdDeviation = "10"/> 
< feBlend in = "SourceGraphic" in2 = "blurOQut" mode = "normal" /> 
</filter> 
</defs > 
< text x= "10" y= "100" style = "fill:url( #grad1l); font- size: 30px;" 
filter = "url( # fl)"> I love SVG I love SVG 
</text> 
</svg> 


I loye SVC I love SVG 


图 2.24 向 文本 应 用 过 滤器 和 渐变 


2.9.5 向 网 页 添加 SVG XML 


创建 SVG XML 之 后 ,可 采用 多 种 方式 将 它 包含 在 HTML 页 面 中 。 第 一 种 方法 是 直 
接 将 SVG XML ik A #J| HTML 文档 中 ,如 以 下 代码 所 示 。 


<html> 
<head> 
<title> Embedded SVG </title > 
</head> 
< body style = "height: 600px; width: 100 % ; padding: 30px;"> 
< svg xmlns = "http://www. w3. org/2000/svg" version = "1.1"> 
<circle cx = "100" cy= "50" r = "40" fill = "red" /> 
</svg> 
</body> 
</html> 


此 方法 可 能 最 简单 ,但 它 不 支持 重用 。 请 记 住 , 可 以 使 用 SVG 扩展 名 保存 SVG XML 
文件 。 当 将 SVG 图 形 保存 到 SVG 文件 中 时 ,可 以 使 用 embed 、object 和 iframe 元 素来 将 它 
包含 在 网 页 中 。 如 以 下 代码 显示 了 使 用 embed TRUE SVG XML 文件 。 


< embed src = "circle. svg" type = "image/svg + xml" /> 


如 以 下 代码 显示 了 如 何 使 用 object 元 素 包含 一 个 SVG XML 文件 。 


< object data = "circle. svg" type = "image/svg + xm1"></object > 
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如 以 下 代码 给 出 了 使 用 iframe 元 素 包 含 一 个 SVG XML 文件 。 


< iframe src = "circlel. svg"></iframe> 


当 使 用 其 中 一 种 方法 时 ,可 以 将 同一 个 SVG 图 形 包 含 在 多 个 页 面 中 ,并 编辑 SVG 源 文 
件 来 进行 更 新 。 


2.10 拖 放 


拖 放 是 一 种 常见 的 特性 , 即 抓 取 对 象 以 后 拖 到 另 一 个 位 置 。 在 HTML5 中 , 拖 放 是 标 
准 的 一 部 分 ,任何 元 素 都 能 够 拖 放 。 下 面 的 例子 是 一 个 简单 的 拖 放 实 例 。 


<!DOCTYPE HTML > 

<html> 

<head> 

< script type = "text/javascript"> 
function allowDrop( ev) 

{ 

ev.preventDefault(); 

} 


function drag(ev) 

{ 

ev. dataTransfer. setData( "Text", ev. target. id); 
Ji 


function drop(ev) 

{ 

ev.preventDefault(); 

var data = ev. dataTransfer. getData("Text"); 

ev. target. appendChild( document. getE1ementById( data) ) ; 
i 

</script> 

</head> 

< body> 


<div id= "div1" ondrop = "drop( event)" 

ondragover = "allowDrop( event) "></div> 

< img id= "dragl" src = "img_logo. gif" draggable = "true" 
ondragstart = "drag(event)" width= "336" height = "69" /> 


</body> 
</html> 


对 于 上 面 的 代码 解释 如 下 : 首先 ,为 了 使 元 素 可 拖 动 ,把 draggable 属性 设置 为 true, 
<img draggable= "true" />; 拖 动 什么 用 ondragstart 和 setData()。 然 后 ,规定 当 元 素 被 拖 动 
时 ,会 发 生 什 么 。 在 上 面 的 例子 中 ,ondragstart 属性 调用 了 一 个 函数 drag(event) , 它 规定 了 被 


拖 动 的 数据 。dataTransfer. setData() 方 法 设置 被 拖 数据 的 数据 类 型 和 值 。 


function drag(ev) 


í. 
ev. dataTransfer. setData( "Text" ,ev.target. id); 
l: 


在 这 个 例子 中 ,数据 类 型 是 Text, 值 是 可 拖 动 元 素 的 id("dragl")。 放 到 何 处 用 
ondragover。ondragover 事件 规定 在 何 处 放置 被 拖 动 的 数据 。 默 认 地 ,无 法 将 数据 /元 素 放 
置 到 其 他 元 素 中 。 如 果 需 要 设置 允许 放置 ,必须 阻止 对 元 素 的 默认 处 理 方式 。 这 要 通过 调 
用 ondragover 事件 的 event. preventDefault() 方 法 .放置 时 用 ondrop, 当 放置 被 拖 数据 时 ， 
会 发 生 drop 事件 。 在 上 面 的 例子 中 ,ondrop 属性 调用 了 一 个 函数 drop(event) 。 


function drop(ev) 

{ 

ev.preventDefault(); 

var data = ev. dataTransfer. getData( "Text" ); 

ev. target. appendChild( document. getE1ementById( data) ) ; 
) 


调用 preventDefault() 来 避免 浏览 器 对 数据 的 默认 处 理 (Cdrop 事件 的 默认 行为 是 以 链 
接 形式 打开 的 ) ,通过 dataTransfer. getData("Text") 方 法 获得 被 拖 的 数据 。 该 方法 将 返回 
在 setData() 方 法 中 设置 为 相同 类 型 的 任何 数据 。 被 拖 数据 是 被 拖 元 素 的 id("drag1") 把 被 
拖 元 素 追 加 到 放置 元 素 ( 目 标 元 素 ) 中 。 


2.11 _ HTMLS 移动 开发 实例 


下 面 来 看 一 个 使 用 Canvas 来 创建 一 个 图 形 报告 的 应 用 程序 。 图 2. 25 展示 了 该 应 用 程 
序 的 屏幕 截图 : 一 个 显示 每 年 结果 的 柱状 图 。 代 码 如 下 。 
Eg A ss: BEE 9:19PM 
http://future-web.app... | HB 


2007 2008 2009 2010 


2.25 ”图形 报告 
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HTML 清单 如 下 , 


<! DOCTYPE html > 
<html> 
<head> 
< meta http- equiv = "Content - Type" content = "text/html; charset = UTF - 8"> 
< meta name = "viewport" content = "width = device - width; initial - scale=1.0; 
maximum — scale = 1. 0; user — scalable = 0;"/> 
< meta name = "apple —- touch - fullscreen" content 
<title> HTML 5 Reports </title> 
< script type = "text/javascript"> 
function init(){ 
var data = [{year : "2007", sales : 49}, 
{year : "2008", sales : 131}, 
{year : "2009", sales : 294}, 
{year : "2010", sales : 405} ]; 
var report = {x : "year", 
y : "sales", 
values : data}; 
graph(report, 350, 300); 


"YEST /> 


} 
</script> 
</head> 
< body onload = "init()"> 
< canvas id = "graph"></canvas > 
</body> 
</html> 


Graph 函数 如 下 。 


function graph(report, maxWidth, maxHeight){ 
var data = report. values; 
var canvas = document.getElementById("graph"); 
var axisBuffer = 20; 
canvas. height = maxHeight + 100; 
canvas. width = maxWidth; 
var ctx = canvas. getContext("2d" ); 


var width = 50; 

var buffer = 20; 

var i = 0; 

var x = buffer + axisBuffer; 

ctx. font = "bold 12px sans - serif"; 

ctx. textAlign = "start"; 

for (i= 0;i< data. length;i++){ 
ctx. fillStyle = "rgba(0, 0, 200, 0.9)"; 
ctx. fillRect(x, maxHeight — (data[i][report. y] / 2), 

width, (data[i][report. y] / 2)); 

ctx. fillStyle = "rgba(0, 0, 0, 0.9)"; 


ctx.fillText(data[i][report.x], x + (width / 4), maxHeight + 15); 


x += width + buffer; 
i 


//draw the horizontal axis 

ctx. moveTo(axisBuffer, maxHeight); 

ctx. lineTo(axisBuffer + maxWidth, maxHeight); 
ctx. strokeStyle = "black"; 

ctx. stroke(); 


//draw the vertical axis 

ctx. moveTo(axisBuffer, 0); 

ctx. lineTo(axisBuffer, maxHeight) ; 
ctx. stroke( ); 


//draw gridlines 

var lineSpacing = 50; 

var numLines = maxHeight/lineSpacing; 

vary = lineSpacing; 

ctx. font = "10px sans - serif"; 

ctx. textBaseline = "middle"; 

for (i= 0;i< numLines;i++){ 
ctx. strokeStyle = "rgba(0,0,0,0.25)"; 
ctx. moveTo(axisBuffer, y); 
ctx. lineTo(axisBuffer + maxWidth, y); 
ctx. stroke( ); 
ctx. fillStyle = "rgba(0,0,0, 0.75)"; 
ctx.fillText("" + (2 * (maxHeight - y)), 0, y); 
y += lineSpacing; 


小 结 


本 章 主要 介绍 了 HTML5 中 新 增 的 语义 化 标签 元 素 , 以 及 结合 移动 设备 环境 下 的 Web 
页 面 布局 以 及 相关 的 例子 。 通 过 学 习 HTML5, 可 以 为 以 后 从 事 移动 Web 开发 工作 打下 


基础 。 
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第 3 章 HTMLS 本 地 存储 


本 章 学 习 目 标 

。 localStorage 数据 存储 

。 sessionStorage 数据 存储 

。 Web SQL Database 数据 存储 


在 HTML5 中 引入 了 localStorage, 其实 这 个 概念 很 早 就 有 ,如 最 初 的 Cookies, 但 是 
cookie 不 适合 大 量 数据 的 存储 ,因为 它们 由 每 个 对 服务 器 的 请 求 来 传递 ,这 使 得 cookie 的 
速度 很 慢 而 且 效 率 也 不 高 。 后 来 又 有 IE 的 userData, 再 到 Google 的 Gears ,直到 现在 的 
localStorage, 从 概念 上 都 是 一 脉 相 承 的 。 只 不 过 在 HTML5 中 将 它 制定 成 了 标准 ,结束 了 
以 前 各 行 其 是 的 状态 。HTML5 提供 了 两 种 在 客户 端 存储 数据 的 新 方法 : localStorage( 没 
有 时 间 限 制 的 数据 存储 ) 和 sessionStorage( 针 对 一 个 session 的 数据 存储 ) 。 

sessionStorage 用 于 本 地 存储 一 个 会 话 (Session) 中 的 数据 ,这 些 数据 只 有 在 同一 个 会 
话 中 的 页 面 才能 访问 并 且 当 会 话 结 束 后 数据 也 随 之 销毁 。 因 此 sessionStorage 不 是 一 种 持 
久 化 的 本 地 存储 ,仅仅 是 会 话 级 别 的 存储 。 而 localStorage 用 于 持久 化 的 本 地 存储 ,除非 主 
动 删除 数据 ,和 否则 数据 是 永远 不 会 过 期 的 。 


3.1 _ HTMLS 本 地 存储 的 浏览 器 支持 情况 


除了 IE 7 及 以 下 不 支持 HTML5 外 ,其 他 标准 浏览 器 都 完全 支持 (IE 及 Firefox 需 在 
Web 服务 器 里 运行 )。 值 得 一 提 的 是 ,IE 总 是 办 好 事 ,例如 IE7、IE 6 中 的 UserData 其 实 就 
是 JavaScript 本 地 存储 的 解决 方案 。 通 过 简单 的 代码 封装 可 以 统一 到 所 有 的 浏览 器 都 支持 
Web 存储 。 

要 判断 浏览 器 是 否 支持 localStorage 可 以 使 用 下 面 的 代码 。 


if(window. localStorage){ 
alert(" 浏 览 支 持 localStorage") 


}else{ 
alert(" 浏 览 暂 不 支持 localStorage") } 
// 或 者 
if(typeof window. localStorage == 'undefined'){ 


alert(" 浏 览 暂 不 支持 localStorage" ) 
f 


3.2 sessionStorage 操作 


在 HTML5 中 增加 了 一 个 JavaScript 对 象 : sessionStorage; 通过 此 对 象 可 以 直接 操作 
存储 在 浏览 器 中 的 会 话 级 别 的 Web 存储 。 存 储 在 sessionStorage 中 的 数据 首先 是 Key- 
Value 形式 的 ,另外 就 是 它 跟 浏览 器 当前 会 话 相 关 , 当 会 话 结 束 后 ,数据 会 自动 清除 , 跟 未 设 
置 过 期 时 间 的 Cookie 类 似 。sessionStorage 提供 了 4 个 方法 对 本 地 存储 进行 相关 操作 。 

(1) setItem(key,value) : 添加 本 地 存储 数据 。 

(2) getltem(key); 通过 key 获取 相应 的 value. 

(3) removeltem(key): 通过 key 删除 本 地 数据 。 

(4) clear() : 清空 数据 。 

示例 代码 如 下 。 


< script type = "text/javascript"> 

// 添 加 key- value 数据 到 sessionStorage 
sessionStorage. setItem("demokey", "abc"); 

// 通 过 key 来 获取 value 

var dt = sessionStorage. getItem("demokey"); 
alert(dt); 

// 清 空 所 有 的 key- value 数据 
//sessionStorage. clear(); 
alert(sessionStorage. length); 

</script > 


对 于 JavaScript 的 学 习 和 调试 必须 有 Chrome 的 调试 工具 辅助 才能 事半功倍 ,使 用 F12 
快捷 键 就 立即 打开 工具 了 ,IE 也 是 这 个 快捷 键 。 如 图 3. 1 所 示 , 可 以 查看 当前 浏览 器 中 的 
sessionStorage 数据 。 


Q 日 Elements Network Sources Timeline Profiles |Resourees| > >” 重唱 ,> 
>C Frames Key Value 

HwebsoL demokey abc 

Í Indexedo8 
> EB Local Storage 


Í Cache Storage 


| 
file:// | 
| 
| 
| 


图 3.1 浏览 器 中 的 sessionStorage 数据 


3.3 localStorage 操作 


在 最 新 的 JavaScript 的 API 中 增加 了 localStorage 对 象 ,以 便于 用 户 存储 永久 存储 的 
Web 端的 数据 。 而 且 数据 不 会 随 着 HTTP 请 求 发 送 到 后 台 服 务 器 ,而 且 存 储 数 据 的 大 小 
机 会 不 用 考虑 ,因为 在 HTML5 的 标准 中 要 求 浏览 器 至 少 要 支持 到 AMB, Fr À , X Së 4 BH 
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ZT Cookie 的 限制 ,为 Web 应 用 在 本 地 存储 复杂 的 用 户 痕 迹 数据 提供 了 非常 方便 的 技术 
支持 。 接 下 来 分 别 介绍 一 下 localStorage 的 常用 方法 ,当然 基本 上 与 sessionStorage 是 一 致 
的 。localStorage 提供 了 4 个 方法 对 本 地 存储 进行 相关 操作 。 

(1) setItem(key,value) : 添加 本 地 存储 数据 。 

(2) getItem(key) : 通过 key 获取 相应 的 value, 

(3) removeltem(key) : 通过 key 删除 本 地 数据 。 

(4) clear(): 清空 数据 。 

示例 代码 如 下 。 


< script type = "text/javascript"> 
// 添 加 key- value 数据 到 sessionStorage 
localStorage. setItem("demokey", "abc"); 
// 通 过 key 来 获取 value 
var dt = localStorage. getItem("demokey" ); 
alert(dt); 
// 清 空 所 有 的 key- value 数据 
//localStorage. clear(); 
alert(localStorage. length); 

</script > 


同样 用 Chrome 的 调试 工具 可 以 查看 当前 浏览 器 中 的 localStorage 数据 ,如 图 3. 2 
所 示 。 


Q [] Elements Network Sources Timeline Profiles |Resourees| > > @ Q, x 
> O Frames Key Value 
由 websQL demokey labe 
Í indexedD8 
v BB Local Storage 
> Ë Session Storage 
> R Cookies 
E Application Cache 
Ë Cache Storage 


3.2 浏览 器 中 的 localStorage 数据 


3.4 Web SQL Database 


虽然 HTML5 已 经 提供 了 功能 强大 的 localStorage 和 sessionStorage, 但 是 它们 两 个 都 
只 能 提供 存储 简单 数据 结构 的 数据 ,对 于 复杂 的 Web 应 用 的 数据 却 无 能 为 力 。HTML5 还 
提供 了 一 个 浏览 器 端的 数据 库 支持 (Web SQL Database), 它 允许 直接 通过 JavaScript 的 
API 在 浏览 器 端 创建 一 个 本 地 的 数据 库 ,而 且 支 持 标 准 的 SQL 的 CRUD 操作 ,让 离线 的 
Web 应 用 更 加 方便 地 存储 结构 化 的 数据 。 接 下 来 介绍 本 地 数据 的 相关 API 和 用 法 。 

操作 本 地 数据 库 的 最 基本 的 步骤 如 下 。 

第 一 步 : 使 用 openDatabase 方法 创建 一 个 访问 数据 库 的 对 象 。 

第 二 步 : 使 用 第 一 步 创建 的 数据 库 访 问 对 象 来 执行 transaction 方法 ,通过 此 方法 可 以 


设置 一 个 开启 事务 成 功 的 事件 响应 方法 ,在 事件 响应 方法 中 可 以 执行 SQL。 
第 三 步 : 通过 executeSql 方法 执行 查询 ,当然 查询 可 以 是 CRUD 等 操作 。 
接 下 来 分 别 介绍 一 下 相关 方法 的 参数 和 用 法 。 
(1) openDatabase 方法 。 
例如 ,获取 或 者 创建 一 个 数据 库 , 如 果 数 据 库 不 存在 那么 创建 之 。 例 如 : 


var dataBase = openDatabase("student", "1.0"," 学 生 表 ",1024 * 1024, function () { }); 


openDatabase 方法 打开 一 个 已 经 存在 的 数据 库 , 如 果 数 据 库 不 存在 , 它 还 可 以 创建 数 
据 库 。 几 个 参数 的 意义 分 别 如 下 。 

D 数据 库 名 称 。 

© 数据 库 的 版 本 号 ,目前 来 说 使 用 1.0 就 可 以 了 ,当然 也 可 以 不 填 。 

© 对 数据 库 的 描述 。 

@ 设置 分 配 的 数据 库 的 大 小 (单位 是 KB)。 

© 回调 函数 (可 省 略 )。 

初次 调用 时 创建 数据 库 , 以 后 就 是 建立 连接 了 。 

(2) db. transaction 方法 可 以 设置 一 个 回调 函数 ,此 方法 用 于 处 理事 务 , 当 一 条 语句 执 
行 失败 的 时 候 , 整 个 事务 回 滚 。 该 方法 有 以 下 三 个 参数 。 

O 包含 事务 内 容 的 一 个 方法 。 

© 执行 成 功 回调 函数 (可 选 ) 。 

© 执行 失败 回调 函数 (可 选 ) 。 

(3) 通过 executeSql 方法 执行 查询 。 


ts. executeSql( sqlQuery, [valuel, value2, ... ], dataHandler, errorHandler) 


参数 说 明 : 

O sqlQuery: 需要 具体 执行 的 SQL 语句 ,可 以 是 create, select, update, delete, 

@ [valuel,value2,…]: SQL 语句 中 所 有 使 用 到 的 参数 的 数组 ,在 executeSql 方法 中 ， 
将 SQL 语句 中 所 要 使 用 的 参数 先 用 “?” 代 替 ,然后 依次 将 这 些 参数 组 成 数组 放 在 第 二 个 参 
数 中 。 

®© dataHandler: 执行 成 功 时 调用 的 回调 函数 ,通过 该 函数 可 以 获得 查询 结果 集 。 

@ errorHandler: 执行 失败 时 调用 的 回调 函数 。 

下 面 是 一 个 综合 的 例子 .代码 如 下 。 


<! DOCTYPE HTML > 
<html> 
<head> 

< title > Web SQL Database </title> 
</head> 
<body> 

< script type = "text/javascript"> 
var db = openDatabase( 'testDB', '1.0', "Test DB', 2 * 1024 * 1024); 
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var msg; 
db. transaction(function (context) { 
context. executeSq] ( 'CREATE TABLE IF NOT EXISTS testTable (id unique, name)'); 
context. executeSq]l ( 'INSERT INTO testTable (id, name) VALUES (0, "Byron")'); 
context. executeSql ( 'INSERT INTO testTable (id, name) VALUES (1, "Casper")'); 
context. executeSql ( 'INSERT INTO testTable (id, name) VALUES (2, "Frank")'); 
H); 


db. transaction(function (context) { 
context. executeSq1( 'SELECT * FROM testTable', [], function (context, results) 


{ 
var len = results. rows. length, i; 
console. log( 'Got ' + len + ' rows. '); 
Eor (3 = Ó; i < Ten; dr 
console. log( 'id: '+ results. rows. item( i). id); 
console. log( 'name: ' + results. rows. item( i). name); 
} 
)); 
D; 
</script> 
</body> 
</html> 


同样 用 Chrome 的 调试 工具 可 以 查看 当前 浏览 器 中 的 Web SQL 数据 ,如 图 3. 3 所 示 o 


Q [] Elements Network Sources Timeline Profiles |Resources| > > @ 是 ,x 
> CI Frames rowid id name 
v wes sQL ñ g = 

M: LED 3 2 Fak. 


| 

H IndexedD8 | 

* i Local Storage | 

> 国 Session Storage 

> Ë Cookies | 
IE Application Cache | 
H Cache Storage | 


图 3.3 浏览 器 中 的 Web SQL 数据 


小 结 


本 章 主要 介绍 了 localStorage 数据 存储 , sessionStorage 数据 存储 , Web SQL Database 
数据 存储 。 通 过 本 章 的 学 习 , 可 以 掌握 HTML5 的 数据 存储 方式 。 


第 4 章 HTML5 离线 应 用 


本 章 学 习 目 标 
。 HTML5 离线 功能 
。 在 线 状态 检测 


Web 2. 0 技术 鼓励 个 人 的 参与 ,每 个 人 都 是 Web 内 容 的 撰写 者 。 如 果 Web 应 用 能 够 
提供 离线 的 功能 ,让 用 户 在 没有 网 络 的 地 方 也 能 进行 内 容 撰 写 , 等 到 有 网 络 的 时 候 ,再 同步 
到 Web 上 ,就 大 大 方便 了 用 户 的 使 用 。HTML5 作为 新 一 代 的 HTML 标准 ,包含 对 离线 功 
能 的 支持 。 本 章 介绍 了 HTML5 离线 功能 中 的 离线 资源 缓存 .在线 状态 检测 .本 地 数据 存 
储 等 内 容 ,并 举例 说 明了 如 何 使 用 HTML5 的 新 特性 开发 离线 应 用 。 


4.1 _ HTMLS 离线 功能 介绍 


HTML5 是 目前 正在 讨论 的 新 一 代 HTML 标准 , 它 代表 了 现在 Web 领域 的 最 新 发 展 
方向 。 在 HTML5 标准 中 ,加 入 了 新 的 多 样 的 内 容 描述 标签 ,直接 支持 表单 验证 、 视 频 音 频 
标签 、 网 页 元 素 的 拖 忠 、 离 线 存储 和 工作 线程 等 功能 。 其 中 一 个 新 特性 就 是 对 离线 应 用 开发 
的 支持 。 

在 开发 支持 离线 的 Web 应 用 程序 时 ,开发 者 通常 需要 使 用 以 下 三 个 方面 的 功能 。 

(1) 离线 资源 缓存 。 需 要 一 种 方式 来 指明 应 用 程序 离线 工作 时 所 需 的 资源 文件 。 这 
样 ,浏览 器 才能 在 在 线 状态 时 ,把 这 些 文件 缓存 到 本 地 。 此 后 , 当 用 户 离 线 访 问 应 用 程序 时 ， 
这 些 资源 文件 会 自动 加 载 , 从 而 让 用 户 正 常 使 用 。HTML5 中 ,通过 cache manifest 文件 指 
明 需 要 缓存 的 资源 ,并 支持 自动 和 手动 两 种 缓存 更 新 方式 。 

(2) 在 线 状 态 检 测 。 开 发 者 需要 知道 浏览 器 是 否 在 线 , 这 样 才 能 够 针对 在 线 或 离线 的 
状态 ,做 出 对 应 的 处 理 。 在 HTML5 中 ,提供 了 两 种 检测 当前 网 络 是 否 在 线 的 方式 。 

(3) 本 地 数据 存储 。 离 线 时 ,需要 能 够 把 数据 存储 到 本 地 ,以 便 在 线 时 同步 到 服务 器 
上 。 为 了 满足 不 同 的 存储 需求 ,HTML5 提供 了 DOM Storage 和 Web SQL Database 两 种 
存储 机 制 。 前 者 提供 了 简单 的 key/value 的 存储 方式 ,而 后 者 提供 了 基本 的 关系 数据 库存 
储 功 能 。 

尽管 HTML5 还 处 于 草稿 状态 ,但 是 各 大 主流 浏览 器 都 已 经 实现 了 其 中 的 很 多 功能 。 
Chrome、Firefox、Safari 和 Opera 的 最 新 版 本 都 对 HTML5 离线 功能 提供 了 完整 的 支持 。 
IE 8 也 支持 了 其 中 的 在 线 状态 检测 和 DOM Storage 功能 。 下 面 将 具体 介绍 HTML5 离线 
功能 中 的 离线 资源 缓存 \ 在 线 状 态 检 测 .DOM Storage 和 Web SQL Database, 最 后 通过 一 
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个 简单 的 Web 程序 说 明 使 用 HTML5 开发 离线 应 用 的 方法 。 


4.2 离线 资源 缓存 


为 了 能 够 让 用 户 在 离线 状态 下 继续 访问 Web 应 用 ,开发 者 需要 提供 一 个 cache 
manifest 文件 。 这 个 文件 中 列 出 了 所 有 需要 在 离线 状态 下 使 用 的 资源 ,浏览 器 会 把 这 些 资 
源 缓存 到 本 地 。 本 节 先 通过 一 个 例子 展示 cache manifest 文件 的 用 途 , 然 后 详细 描述 其 书 
写 方法 ,最 后 说 明 缓 存 的 更 新 方式 。 

1. cache manifest 示例 

下 面 通过 W3C 提供 的 示例 来 说 明 。Clock Web 应 用 由 三 个 文件 clock. html, clock. css 
和 clock.js 组 成 。 以 下 是 Clock 应 用 代码 。 


<! == clock. htel —— > 
<! DOCTYPE HTML > 
<html> 
< head> 
<title> Clock </title> 
< script src = "clock. js"></script > 
< link rel = "stylesheet" href = "clock, css"> 
</head> 
< body> 
<p>The time is: < output id = "clock"></output ></p> 
</body> 
</html> 


/* clock.css */ 
output { font: 2em sans - serif; } 


/x* clock. js * / 
setTimeout(function () { 

document. getElementById('clock'). value = new Date(); 
}, 1000); 


当 用 户 在 离线 状态 下 访问 clock. html 时 ,页 面 将 无 法 展现 。 为 了 支持 离线 访问 ,开发 
者 必须 添加 cache manifest 文件 ,指明 需要 缓存 的 资源 。 这 个 例子 中 的 cache manifest 文件 
为 clock. manifest, 它 声明 了 三 个 需要 缓存 的 资源 文件 clock. html, clock. css 和 clock. js, 
clock. manifest 代码 如 下 。 


CACHE MANIFEST 
clock. html 
clock. css 
clock. js 


添加 了 cache manifest 文件 后 ,还 需要 修改 clock. html, Jë <html > PR hY manifest 属 
性 设置 为 clock. manifest, BUSHY clock. html 代码 如 下 。 


<! == Clock, htel ——> 
<! DOCTYPE HTML > 
<html manifest = "clock. manifest"> 
< head> 
<title> Clock </title> 
< script src = "clock. js"></script > 
< link rel = "stylesheet" href = "clock. css"> 
</head> 
< body> 
<p>The time is: < output id = "clock"></output ></p> 
</body> 
</html> 


修改 后 , 当 用 户 在 线 访问 clock. html 时 ,浏览 器 会 缓存 clock. html, clock. css 和 clock. js 文 
件 ; 而 当 用 户 离线 访问 时 ,这 个 Web 应 用 也 可 以 正常 使 用 了 。 

2. cache manifest 格式 说 明 

下 面 说 明 书 写 cache manifest 文件 需要 遵循 的 格式 。 

(1) 首 行 必 须 是 “CACHE MANIFEST”, 

(2) 其 后 每 一 行列 出 一 个 需要 缓存 的 资源 文件 名 。 

(3) 可 根据 需要 列 出 在 线 访问 的 白 名 单 。 白 名 单 中 的 所 有 资源 不 会 被 缓存 ,在 使 用 时 
将 直接 在 线 访 问 。 声 明白 名 单 使 用 NETWORK: 标识 符 ”。 

(4) 如 果 在 白 名 单 后 还 要 补充 需要 缓存 的 资源 ,可 以 使 用 "CACHE: 标识 符 ”。 

(5) 如 果 要 声明 某 URI 不 能 访问 时 的 替补 URI, 可 以 使 用 "FALLBACK: 标识 符 ”。 其 
后 的 每 一 行 包含 两 个 URI, 当 第 一 个 URI 不 可 访问 时 ,浏览 器 将 尝试 使 用 第 二 个 URI, 

(6) 注释 要 另 起 一 行 ,以 并 号 开头 。 

以 下 的 代码 中 给 出 了 cache manifest 中 各 类 标识 符 的 使 用 示例 。 


CACHE MANIFEST 
# 上 一 行 是 必须 书写 的 。 


images/sound - icon. png 
images/background. png 


NETWORK: 

comm. cgi 

# 下 面 是 另 一 些 需 要 缓存 的 资源 ,在 这 个 示例 中 只 有 一 个 css 文件 。 
CACHE: 

style/default. css 


FALLBACK: 
/files/projects /projects 


更 新 缓存 : 应 用 程序 可 以 等 待 浏览 器 自动 更 新 缓存 ,也 可 以 使 用 JavaScript 接口 手动 
触发 更 新 。 
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1. 自动 更 新 

浏览 器 除了 在 第 一 次 访问 Web 应 用 时 缓存 资源 外 ,只 会 在 cache manifest 文件 本 身 发 
生变 化 时 更 新 缓存 。 而 cache manifest 中 的 资源 文件 发 生变 化 并 不 会 触发 更 新 。 

2. 手动 更 新 

开发 者 也 可 以 使 用 window. applicationCache 的 接口 更 新 缓存 。 方 法 是 检测 window 
. applicationCache. status 的 值 , 若 是 UPDATEREADY, 那 么 可 以 调用 window. application 
Cache. update() 更 新 缓存 。 手 动 更 新 缓存 示范 代码 如 下 。 


if(window.applicationCache. status == window.applicationCache. UPDATEREADY) 
t 
window. applicationCache. update( ) ; 
1 


4.3 在 线 状态 检测 


如 果 Web 应 用 程序 仅仅 是 一 些 静 态 页 面 的 组 合 ,那么 通过 cache manifest 缓存 资源 文 
件 以 后 ,就 可 以 支持 离线 访问 了 。 但 是 随 着 互联 网 的 发 展 ,特别 是 Web 2. 0 的 概念 流行 以 
来 ,用 户 提交 的 数据 渐渐 成 为 互联 网 的 主流 。 那 么 在 开发 支持 离线 的 Web 应 用 时 ,就 不 能 
仅 满足 于 静态 页 面 的 展现 ,还 必须 考虑 如 何 让 用 户 在 离线 状态 下 也 可 以 操作 数据 。 离 线 状 
态 时 ,把 数据 存储 在 本 地 ; 在 线 以 后 ,再 把 数据 同步 到 服务 器 上 。 为 了 做 到 这 一 点 ,开发 者 
首先 必须 知道 浏览 器 是 否 在 线 。HTML5 提供 了 两 种 检测 是 否 在 线 的 方式 :navigator. 
online 和 online/offline 事件 。 

1. navigator. online 事件 

navigator. online 属性 表示 当前 是 否 在 线 。 如 果 为 true, 表 示 在 线 ; 如 果 为 false, 表 示 
离线 。 当 网 络 状态 发 生变 化 时 ,navigator. online 的 值 也 随 之 变化 。 开 发 者 可 以 通过 读 取 它 
的 值 获取 网 络 状态 。 

2. online/offline 事件 

当 开 发 离线 应 用 时 ,通过 navigator. online 获取 网 络 状 态 通 常 是 不 够 的 。 开 发 者 还 需 
要 在 网 络 状态 发 生变 化 时 立刻 得 到 通知 ,因此 HTML5 还 提供 了 online/offline 事件 。 当 在 
线 / 离 线 状 态 切 换 时 ,online/offline 事件 将 触发 在 body 元 素 上 ,并 且 沿 着 document. body、 
document 和 window 的 顺序 冒 泡 。 因 此 ,开发 者 可 以 通过 监听 它们 的 online/offline 事件 来 
获悉 网 络 状 态 。 


4.4 离线 应 用 示例 


最 后 通过 一 个 例子 来 说 明 使 用 HTML5 开发 离线 应 用 的 基本 方法 ,这 个 例子 是 一 个 简 
单 的 库存 管理 应 用 程序 ,可 以 用 于 追踪 所 拥有 的 物资 。 如 图 4. 1 和 图 4.2 所 示 的 是 在 
Opera Mobile 中 测试 的 结果 ,屏幕 上 半 段 是 所 有 输入 项 目 ( 书 籍 、 计 算 机 等 ) 的 概览 。 

当 用 户 在 清单 中 选择 某 一 项 目 时 .其 明细 (Id、Quantity、Name) 在 表单 中 部 显示 。 使 用 
update 按钮 可 改变 所 选项 目的 明细 ,使 用 delete 按钮 可 从 应 用 程序 中 删除 所 选项 目 。 在 表 


单 中 输入 项 目的 数量 和 名 称 并 单 击 create 按钮 可 创建 新 项 目 。HTML 页 面包 含 声明 、 原 标 
记 , 这 些 用 于 移动 优化 显示 、 对 外 部 文件 (manifest、JavaScript、CSS) 的 引用 ,以 及 组 成 应 用 
程序 基本 结构 必需 的 HTML 元 素 。 

页 面 的 HTML 代码 如 下 。 


<! DOCTYPE HTML > 
< html manifest = "MyHomeStuff. manifest"> 
<head> 
< meta name = "viewport" content = "width = 480; initial - scale = 1.0; maximum — scale = 1. 0; 
user — scalable = 0; "> 
< title > MyHomeStuff </title> 
< script type = "text/javascript" src = "MyHomeStuff. js" ></script> 
</head> 
< body onload = "onInit()"> 
< h3 > Overview. </h3 > 
<ul id= "itemData" > 
</ul> 
< h3 > Details </h3 > 
< form name = " itemForm"> 
< label for = "id"> Id:</label >< input type = "text" name = "jd" id= "id" size = 2 disabled = 
"true" /> 
< label for = "amount"> Qty:</label >< input type = "text" name = "amount" id= "amount" size = 3/> 
< label for = "name"> Name:</label >< input type = "text" name = "name" id= "name" size = 10 /> <br> 
<br> 
< input type = "button" name = "create" value = "create" onclick = "onCreate()" /> 
< input type = "button" name = "update" value = "update" onclick = "onUpdate()" /> 
< input type = "button" name = "delete" value = "delete" onclick = "onDelete()" /> 


</form> 

< h4 > Status </h4 > 

<div id= "status"></div> 
</body> 
</html> 


file/localhost/C:/User: se Í Googie |] file//localhost/C/User: jt Í Goosle | ] 
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HTML 元 素 的 事件 处 理 属性 指定 当 页 面 初始 加 载 (onload) 及 单 击 按钮 元 素 (onclick) 
时 执行 哪些 JavaScript 函数 。 

离线 Web 应 用 程序 的 HTML 页 面 以 二 !DOCTYPE HTML 过 标记 开始 。 通 过 
<html manifest="MyHomeStuff. manifest" 过 标记 中 的 清单 属性 来 引用 清单 。 

如 上 所 述 ,清单 指定 需要 加 载 到 缓存 中 的 文件 。 本 应 用 程序 包含 一 个 HTML 文件 和 
— JavaScript 文件 。 引 用 清单 的 HTML 文件 自动 包含 在 应 用 程序 缓存 中 。 清 单 只 包含 
以 下 部 分 。 

manifest 文件 如 下 。 


CACHE MANIFEST 
MyHomeStuff. js 


JavaScript 代码 文件 如 下 。 


//1. 初 始 化 代码 : onInit 函数 首先 检查 是 否 存在 强制 openDatabase 函数 ,如 果 没 有 ， 
// 则 说 明 浏 览 器 不 支持 本 地 数据 库 。initDB 函数 打开 HTML5 浏览 器 的 数据 库 。 
// 成 功 打开 数据 库 后 ,执行 创建 数据 库 表 的 SQL DDL. 最 后 ,调用 查询 现 有 记录 和 用 数据 
// 更 新 HTML 页 面 的 函数 。 
var localDB = null; 
function onInit(){ 
try ( 
if (!window. openDatabase) { 
updateStatus("Error: DB not supported" ) ; 
} 
else ( 
initDB(); 
createTables(); 
queryAndUpdateOverview( ); 
} 
j; 
catch (e) { 
if (e == 2) { 
updateStatus("Error: Invalid database version. "); 
1 
else ( 
updateStatus("Error: Unknown error " + e + "."); 
J. 


return; 


) 


function initDB()(í( 
var shortName = 'stuffDB'; 
var version = '1.0'; 
var displayName = 'MyStuffDB'; 
var maxSize = 65536; // 单 位 为 字 节 
localDB = window. openDatabase(shortName, version, displayName, maxSize); 


function createTables(){ 


var query = 'CREATE TABLE IF NOT EXISTS items ( id INTEGER NOT NULL PRIMARY 


AUTOINCREMENT, amount VARCHAR NOT NULL, name VARCHAR NOT NULL); '; 
try ( 
localDB. transaction(function(transaction){ 
transaction. executeSql (query, [], nullDataHandler, errorHandler); 
updateStatus("Table 'items' is present"); 


J); 

i 

catch (e) { 
updateStatus("Error: Unable to create table 'items'" + e + "."); 
return; 

} 


//2. 更 新 代码 : 读 取 和 验证 表单 的 字段 值 。 
// 如 果 值 有 效 , 则 执行 更 新 查询 。 
// 查 询 结果 在 更 新 后 的 HTML 页 面 中 显示 。 
function onUpdate( ){ 
var id = document. itemForm. id. value; 
var amount = document. itemForm.amount. value; 
var name = document. itemForm, name. value; 
if (amount == "" || name == "") ( 
updateStatus( " 'Amount' and 'Name' are required fields! "); 


} 
else { 
var query = "update items set amount =?, name = ? where id= ?;"; 
try ( 
localDB. transaction(function(transaction){ 
transaction. executeSql (query, [amount, name, id], 
function(transaction, results){ 
if (!results. rowsAffected) { 
updateStatus("Error: No rows affected"); 
} 
else ( 
updateForm("", "", ""); 
updateStatus("Updated rows:" + results.rowsAffected); 
queryAndUpdateOverview( ); 
} 
}, errorHandler); 
BE 
L 
catch (e) { 
updateStatus( "Error: Unable to perform an UPDATE " + e + "."); 
} 
} 
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function onDelete(){ 
var id = document. itemForm. id. value; 
var query = "delete from items where id= ?;"; 
try { 
localDB. transaction(function(transaction){ 
transaction. executeSql(query, [id], function(transaction, results) { 
if (! results. rowsAffected) { 
updateStatus("Error: No rows affected. ") ; 
J: 
else ( 
updateForm("", "", ""); 
updateStatus("Deleted rows:" + results.rowsAffected); 
queryAndUpdate0verview(); 
) 
}, errorHandler); 
J); 


} 
catch (e) { 

updateStatus("Error: Unable to perform an DELETE " + e + "."); 
} 


function onCreate( ){ 
var amount = document. itemForm. amount. value; 


var name = document. itemForm. name. value; 


if (amount == "" || name == "") { 
updateStatus("Error: 'Amount'and 'Name'are required fields!"); 
} 
else { 
var query = "insert into items (amount, name) VALUES (?, ?);"; 
try { 
localDB. transaction(function(transaction){ 
transaction. executeSq1(query, [amount, name], function(transaction, results){ 
if (!results. rowsAffected) { 
updateStatus("Error: No rows affected. "); 
} 
else { 
updateForm("", "", ""); 
updateStatus("Inserted row with id" + results. insertId) ; 
queryAndUpdateOverview( ); 
l 
}, errorHandler); 
)); 
} 
catch (e) { 
updateStatus("Error: Unable to perform an INSERT " + e + "."); 
} 


) 
// 选 择 代码 : 当 用 户 选取 列表 元 素 后 执行 onSelect 函数 。 将 用 该 元 素 的 数据 填充 明细 表单 
function onSelect(htmlLIElement){ 

var id = htmlLIElement.getAttribute("id"); 

query = "SELECT * FROM items where id= ?;"; 

try ( 

localDB. transaction(function(transaction){ 
transaction. executeSql (query, [id], function(transaction, results) { 
var row = results. rows. item(0); 


updateForm( row[ 'id'], row[ 'amount'], row[ 'name']); 


}, function(transaction, error){ 


updateStatus("Error: " + error.code + "<br>Message: " + error.message); 


)); 
D; 


Í 
catch (e) { 

updateStatus("Error: Unable to select data from the db " + e + "."); 
} 


} 
// 概 览 代 码 : 执行 了 选择 所 有 数据 集 的 查询 。 
// 对 于 结果 中 的 每 个 数据 集 , 创 建 了 HTML 清单 元 素 并 添加 到 列表 中 。 
// 事 件 处 理 函数 onSelect, 添加 到 每 个 列表 元 素 以 在 点 击 时 响应 。 
function queryAndUpdateOverview( ){ 

//remove old table rows 


var dataRows = document.getElementById("itemData").getElementsByClassName("data"); 


while (dataRows. length > 0) { 

row = dataRows[0]; 

document. getElementById( "itemData"). removeChild(row); 
}; 


//read db data and create new table rows 
var query = "SELECT * FROM items;"; 
try ( 
localDB. transaction(function(transaction){ 
transaction. executeSq1(query, [], function(transaction, results)( 
for (var i = 0; i < results. rows. length; i++) ( 


var row = results. rows. item(i); 

var li = document. createElement("1i"); 

li. setAttribute( "id", row['id']); 

li. setAttribute( "class", "data" ) 

li. setAttribute( "onclick", "onSelect(this)"); 


var liText = document. createTextNode ( row[ 'amount'] + " x" + row['name']); 


li. appendChild(liText); 


document. getElementById(" itemData" ).appendChild( li); 


TY = 避 


HTML5 š 8È A 


移动 Web FERR 


)); 
) 


) 


}, function(transaction, error){ 


catch (e) { 
updateStatus( "Error: Unable to select data from the db" + e + "."); 


} 
l: 


updateStatus("Error: " + error.code + "< br >Message: " + error.message); 


//3. 处 理 函 数 代码 : 它们 只 作为 查询 的 参数 。 


errorHandler 


function(transaction, error){ 


updateStatus("Error: " + error.message); 
return true; 


Ji 


nullDataHandler 


= function(transaction, results){ 


// 工 具 代 码 : 将 填充 细节 表单 (updateForm) 的 字段 和 状态 消息 (updateStatus) 
function updateForm( id, amount, name){ 

document. itemForm. id. value = id; 

document. itemForm. amount. value = amount; 

document. itemForm. name, value = name; 


i 


function updateStatus( status) { 
document. getElementById( 'status'). innerHTML = status; 


1! 


小 结 


章 主要 介绍 了 HTML5 离线 功能 和 在 线 状态 的 检测 。 通 过 本 章 的 学 习 , 可 以 开发 出 
HTML5 的 离线 应 用 。 


第 5 = CSS3 与 移动 Web 


本 章 学 习 目标 
。 CSS3 的 基本 特性 


CSS2. 1 发 布 至 今 已 经 有 多 年 的 历史 ,在 这 几 年 里 ,互联 网 的 发 展 已 经 发 生 了 翻天 覆 地 
的 变化 。CSS2. 1 有 时 候 难以 满足 快速 提高 性 能 、 提 升 用 户 体验 的 Web 应 用 的 需求 。CSS3 
标准 的 出 现 就 是 增强 CSS2. 1 的 功能 ,减少 图 片 的 使 用 次 数 以 及 实现 HTML 页 面 上 的 特殊 
效果 。 

在 HTML5 逐渐 成 为 IT 界 最 热门 的 话题 的 同时 ,CSS3 也 开始 慢 慢 地 普及 起 来 。 目 
前 ,很 多 浏览 器 都 开始 支持 CSS3 的 部 分 特性 ,特别 是 基于 Webkit 内 核 的 浏览 器 ,其 支持 力 
度 非 常 大 。 在 Android 和 iOS 等 移动 平台 下 , 正 是 由 于 Apple 和 Google 两 家 公司 大 力 推 广 
HTML5 以 及 各 自 的 Web 浏览 器 的 迅速 发 展 .CSS3 在 移动 Web 浏览 器 下 都 能 到 很 好 的 支 
持 和 应 用 。 

CSS3 作为 在 HTML 页 面 中 担任 页 面 布 局 和 页 面 装饰 的 技术 ,可 以 更 加 有 效 地 对 页 面 
布局 .字体 .颜色 .背景 或 其 他 动画 效果 实现 精确 的 控制 。 

目前 ,CSS3 是 移动 Web 开发 的 主要 技术 之 一 , 它 在 界面 修饰 方面 占有 重要 的 地 位 。 由 
于 移动 设备 的 W eb 浏览 器 都 支持 CSS3, 对 于 不 同 浏览 器 之 间 的 兼容 性 问题 ,它们 之 间 的 差 
异 非常 小 。 不 过 对 于 移动 Web 浏览 器 的 某 些 CSS 特性 ,仍然 需要 做 一 些 兼 容 性 的 工作 。 

当前 ,CSS3 技术 最 适合 在 移动 Web 开发 中 使 用 的 特性 包括 : 增强 的 选择 器 ; 阴影 ; 强 
大 的 背景 设置 ; 圆 角 边框 。 

接 下 来 的 章节 将 会 重点 介绍 如 何 使 用 这 些 CSS3 特性 来 实现 移动 Web 界面 。 


5.1 CSS 盒子 模型 


CSS3 引入 了 新 的 盒 模型 一 一 弹性 盒 模型 ,该 模型 决定 一 个 盒子 在 其 他 盒子 中 的 分 布 
方式 以 及 如 何 处 理 可 用 的 空间 。 这 与 XUL( 火 狐 使 用 的 用 户 交 互 语言 ) 相 似 ,其 他 语言 也 使 
用 相同 的 盒 模型 ,如 XAML、GladeXML。 

使 用 该 模型 ,可 以 很 轻松 地 创建 自 适应 浏览 器 窗口 的 流动 布局 或 自 适应 字体 大 小 的 弹 
性 布局 。 本 章 的 例子 使 用 以 下 的 HTML 代码 。 


<body> 
<div id= "boxl"> 1</div> 
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<div id= "box2">2 </div> 
<div id= "box3"> 3 </div> 
</body> 


传统 的 盒 模型 基于 HTML 流 在 垂直 方向 上 排列 盒子 。 使 用 弹性 盒 模型 可 以 规定 特定 
的 顺序 ,也 可 以 将 其 反 转 。 要 开启 弹性 盒 模型 ,只 需 设 置 拥 有 子 盒子 的 盒子 的 display 的 属 
性 值 为 box( 或 inline-box) 即 可 。 

水 平 或 垂直 分 布 : box-orient 定义 分 布 的 坐标 轴 ,vertical 和 horizonal。 这 两 个 值 定义 
盒子 如 何 显示 ,以 下 是 示例 代码 ,显示 效果 如 图 5. 1 所 示 。 


body{ 

display: box; 

box — orient: horizontal; 
) 


5.1 水 平分 布 


反 向 分 布 : box-direction 可 以 设置 盒子 出 现 的 顺序 。 默 认 情 况 下 ,只 需 定 义 分 布 坐 标 
轴 一 一 box 随 HTML 流 分 布 。 如 果 为 水 平 坐标 轴 , 则 从 左 到 右 分 布 ; 垂直 坐标 轴 则 从 上 到 
下 分 布 。 定 义 box-direction 的 属性 值 为 reverse, 则 反 转 盒子 的 排列 顺序 。 以 下 是 示例 代 
码 , 显 示 效 果 如 图 5. 2 所 示 。 


body { 
display: box; 
box- orient: vertical; 


5.2 反 向 分 布 


具体 分 布 : 属性 box-ordinal-group 定义 盒子 分 布 的 顺序 。 可 以 随意 地 控制 其 分 布 顺 
序 。 这 些 组 以 一 个 从 “1 开始 的 数字 定义 , 盒 模型 将 首先 分 布 这 些 组 ,所 有 这 些 盒子 将 在 每 


个 组 中 。 分 布 将 从 小 到 大 排列 。 以 下 是 示例 代码 ,显示 效果 如 图 5.3 所 示 。 


body { 

display: box; 

box — orient: vertical; 
box- direction : reverse; 
ji 

# box1 { 

box- ordinal - group: 2; 
1! 

# box2 ( 

box- ordinal - group: 2; 
} 

# box3 { 

box- ordinal - group: 1; 
} 


5.3 具体 分 布 


盒子 尺寸 : 默认 情况 下 ,盒子 并 不 具有 弹性 ,如 果 box-flex 的 属性 值 至 少 为 1 时 , 则 变 
得 富有 弹性 。 

如 果 盒子 不 具有 弹性 , 它 将 尽 可 能 的 拉 宽 使 其 内 容 可 见 , 且 没有 任何 溢出 ,其 大 小 由 
width 和 height 来 决定 (或 min-height .min-width .max-width .max-height) 。 

如 果 盒 子 是 弹性 的 ,其 大 小 将 按 下 面 的 方式 计算 : 具体 的 大 小 声明 (width、height、min- 
width, min-height .max-width.max-height) 。 

如 果 盒 子 没 有 任何 大 小 声明 ,那么 其 大 小 将 完全 取决 于 父 box 的 大 小 。 即 ; 盒子 的 大 
小 等 于 父 级 盒子 的 大 小 乘 以 其 box-flex 在 所 有 子 盒子 box-flex 总 和 中 的 百分比 ( 子 盒子 的 
大 小 王 父 盒子 的 大 小 关子 盒子 的 box-flex/ 所 有 子 盒子 的 box-flex 值 的 和 ) 。 

如 果 一 个 或 更 多 的 盒子 有 一 个 具体 的 大 小 声明 ,那么 其 大 小 将 计算 其 中 ,余下 的 弹性 盒 
子 将 按照 上 面 的 原则 分 享 剩 下 的 可 利用 空间 。 

下 面 的 例子 中 ,boxl 的 大 小 为 box2 的 两 倍 ,box2 与 box3 大 小 一 样 。 看 起 来 好 像 是 用 
百分比 定义 盒子 的 大 小 ,但 是 有 一 个 区 别 : 使 用 弹性 盒 模型 ,增加 一 个 盒子 ,无 须 重新 计算 
其 大 小 。 以 下 是 示例 代码 ,显示 效果 如 图 5.4 所 示 。 

body { 

display: box; 


box- orient: horizontal; 
I 
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5.4 使 用 弹性 盒 模型 


下 面 的 例子 中 ,box3 并 不 是 弹性 的 ,宽度 为 160px; 这 样 boxl 和 box2 将 有 240px 的 可 
利用 空间 。 因 此 ,boxl 的 宽度 为 160px(240X2/3) ,box2 的 宽度 为 80px(240X1/3)。 以 下 
是 示例 代码 ,显示 效果 如 图 5.5 所 示 。 


图 5.5 box3 不 是 弹性 的 情况 


溢出 管理 : 因为 是 弹性 盒子 . 非 弹性 盒子 混 排 , 有 可 能 所 有 盒子 的 尺寸 大 于 或 小 于 父 盒 
子 的 尺寸 。 这 样 就 有 可 能 空间 太 多 或 空间 不 足 。 

空间 太 多 的 处 理 方法 : 可 利用 空间 的 分 布 取 决 于 两 个 属性 值 box-align 和 box-pack。 

属性 box-pack 管理 水 平方 向 上 的 空间 分 布 , 有 以 下 4 个 可 能 属性 : start、end justify 和 
center。 

(1) start 一 一 所 有 盒子 在 父 盒子 的 左 侧 ,余下 的 空间 在 右 侧 。 

(2) end 一 一 所 有 盒子 在 父 盒 子 的 右 侧 , 余 下 的 空间 在 左 侧 。 

G) justify 一 一 余下 的 空间 在 盒子 间 平 均 分 配 。 

(4) center 一 一 可 利用 的 空间 在 父 盒子 的 两 侧 平均 分 配 。 

属性 box-align 管理 垂直 方向 上 的 空间 分 布 ,有 以 下 5 个 可 能 属性 : start、end、center、 
baseline 和 stretch, 

A) start 一 一 每 个 盒子 沿 父 盒 子 的 上 边缘 排列 ,余下 的 空间 位 于 底部 。 

(2) end 一 一 每 个 盒子 沿 父 盒子 的 下 边缘 排列 ,余下 的 空间 位 于 项 部 。 

(3) center 一 一 可 用 空间 平均 分 配 , 上 面 一 半 , 下 面 一 半 。 

(4) baseline 一 一 所 有 盒子 沿 着 它们 的 基线 排列 ,余下 的 空间 可 前 可 后 。 

(5) stretch 一 一 每 个 盒子 的 高 度 调整 到 适合 父 盒子 的 高 度 。 

空间 不 足 的 处 理 方法 : 与 传统 的 盒 模型 一 样 ,overflow 属性 用 来 决定 其 显示 方式 。 为 
了 避免 溢出 ,可 以 设置 box-lines 为 multiple 使 其 换行 显示 。 

弹性 盒 模型 看 起 来 很 不 错 ,Gecko 和 Webkit 对 该 模型 都 有 一 些 尝试 性 的 测试 。 在 这 些 
属性 之 前 加 上 -moz 和 -webkit 即 可 使 用 该 属性 。 也 即 是 说 ,Firefox、Safari、,Chrome 可 以 使 
用 这 些 特 性 。 

作为 前 端 开发 者 来 说 ,该 模型 对 解决 网 页 设计 中 一 些 常见 的 问题 非常 方便 ,如 表单 布 
局 .垂直 居中 、 视 觉 上 分 离 HTML 流 等 。 不 久 的 将 来 它 将 成 为 一 个 Web 标准 。 


52 选 择 器 


在 CSS2 中 经 常 使 用 三 个 简单 的 选择 器 : #1ID、. class、 标 签 选 择 器 ,但 是 随 着 CSS3 的 
到 来 ,作为 前 端 开 发 者 还 需要 掌握 下 面 30 个 基本 的 选择 器 ,这 样 才 可 以 在 平时 开发 中 得 心 
应 手 。 

1. * : 通用 元 素 选 择 器 

* 选择 器 是 选择 页 面 上 的 全 部 元 素 , 下 面 代码 的 作用 是 把 全 部 元 素 的 margin 和 
padding 设 为 0, 是 最 基本 的 清除 默认 CSS 样式 的 方法 。 


* ( 
margin: 0; 
padding: 0; 
} 


* 选择 器 也 可 以 应 用 到 子 选择 器 中 ,例如 下 面 的 代码 。 


# container * { 
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border: 1px solid black; 
} 


这 样 ID 为 container 的 所 有 子 标签 元 素 都 被 选中 了 ,并 且 设 置 了 border。 通 用 元 素 选 
择 器 兼容 的 浏览 器 有 : IE 6 十 、Firefox、Chrome、Safari、Opera。 

2. #ID; ID 选择 器 

ID 选择 器 是 CSS 中 效率 最 高 的 选择 器 ,使 用 的 时 候 要 保证 ID 的 唯一 性 。ID 选择 器 兼 
容 的 浏览 器 有 : IE 6 十 、Firefox、Chrome、Safari、Opera。 例 如 下 面 的 代码 。 


# container { 
width: 960px; 
margin: auto; 


ij 


3. .eclass: 类 选择 器 
类 选择 器 效率 低 于 ID 选择 器 ,一 个 页 面 可 以 有 多 个 class, 并 且 class 可 以 放 在 不 同 的 
标签 中 使 用 。 例 如 下 面 的 代码 。 


,error { 
color: red; 


ü 


类 选择 器 兼容 的 浏览 器 有 : IE 6 十 、Firefox、Chrome、Safari、Opera。 
4. X Y: 标签 组 合 选择 器 
标签 组 合 选择 器 是 常用 的 选择 器 。 例 如 下 面 的 代码 。 


lia{ 
text ~ decoration: none; 


j 


标签 组 合 选择 器 兼容 的 浏览 器 有 : IE 6 十 、Firefox、Chrome、Safari、Opera。 

5. X: 标签 选择 器 

标签 选择 器 也 是 常用 的 选择 器 ,如 果 只 是 想 要 页 面 中 的 某 个 标签 样式 改变 ,可 以 选择 使 
用 标签 选择 器 。 例 如 下 面 的 代码 。 


a { color: red; } 
ul { margin- left: 0; } 


标签 选择 器 兼容 的 浏览 器 有 : IE 6+, Firefox, Chrome, Safari, Opera. 
6. 伪 类 选择 器 
伪 类 选择 器 ,最 常用 的 为 a 标签。 例如 下 面 的 代码 。 


a:link { color: red; } 
a:visted ( color: purple; ) 


伪 类 选择 器 兼容 的 浏览 器 有 : IE 7 十 、Firefox、Chrome、Safari、Opera。 
7. X + Y: 毗邻 元 素 选 择 器 
上 毗邻 元 素 选 择 器 ,匹配 的 是 所 有 紧 随 X 元 素 之 后 的 同 级 元 素 Y。 例 如 下 面 的 代码 。 


ul + pl 
color: red; 


} 


兼容 的 浏览 器 有 : IE 7 十 、Firefox、Chrome、Safari、Opera。 
8. X — Y: 子 元 素 选 择 器 
下 面 的 代码 是 子 元 素 选择 器 的 例子 。 


div # container > ul { 
border: lpx solid black; 
J: 


在 此 代码 中 ,匹配 #container 下 的 所 有 子 元 素 。 
KF X> Y 和 XYY 的 区 别 请 再 看 下 面 的 HTML 实例 。 


<div id = "container"> 
<ul> 
<1i> List Item 
<ul> 
<li> Child </li> 
</ul> 
</li> 
<li> List Item </li> 
<li> List Item </li> 
<li> List Item </li> 
</ul> 
</div> 


选择 器 # container > ul 只 会 匹配 到 第 一 个 ul, 也 就 是 # container 的 子 元 素 ul ,而 不 是 
Li 里面 的 ul, 但 是 div ul 则 可 以 匹配 到 所 有 div 里 面 的 ul。 

子 元 素 选 择 器 兼容 的 浏览 器 有 : IE 7 十 、Firefox、Chrome、Safari、Opera。 

9, X = Y; 

这 种 格式 的 例子 如 下 。 


ul— p ( 
color: red; 


) 


在 此 代码 中 ,匹配 任何 在 ul 元 素 之 后 的 同 级 p 元 素 。 也 就 是 选择 了 ul 之 后 的 同 级 所 
有 的 元 素 。 兼 容 的 浏览 器 有 : IE 7 十 、Firefox、Chrome、Safari、Opera。 

10. X[title]: 属性 选择 器 

这 种 格式 的 例子 如 下 。 
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a[title] { 
color: green; 


} 


在 此 代码 中 ,匹配 具有 某 属性 的 标签 ,例如 ,上 例 中 是 匹配 具有 title 属性 的 a 标签 。 兼 
容 的 浏览 器 有 : IE 7 十 、Firefox、Chrome、Safari、Opera。 

11. X[ href="foo"] 

这 种 格式 如 以 下 的 代码 。 


a[href = "http://js8.in"] { 
color: #1f6053; /* nettuts green * / 
} 


这 种 格式 其 实 也 属于 属性 选择 器 ,匹配 属性 中 为 某 个 值 的 标签 。 例 如 ,上 例 中 匹配 的 为 
href 一 "http:/Vjis8.in" 的 a 标 签 , 而 其 他 链接 的 a 标签 不 选择 。 兼 容 的 浏览 器 有 : IE 7 十 、 
Firefox Chrome Safari, Opera. 

12. X[ href * = "nettuts" ] 

这 种 格式 如 以 下 的 代码 。 


a[href * = "tuts"] { 
color: #1f6053; / * nettuts green * / 
) 


这 种 格式 其 实 也 属于 属性 选择 器 ,匹配 href 中 所 有 含有 tuts 的 标签 (正则 匹配 ) 。 兼 容 
的 浏览 器 有 : IE 7 十 、Firefox、Chrome、Safari、Opera。 

13. X[href ^="http"] 

这 种 格式 如 以 下 的 代码 。 


a[href^= "http"] { 
background: url(path/to/external/icon. png) no- repeat; 
padding - 1eft: 10px; 

) 


与 上 面 的 属性 选择 标签 类 似 , 但 是 匹配 的 是 以 http 开头 的 a 标签 (正则 匹配 )。 兼 容 的 
浏览 器 有 : IE 7 十 、\Firefox、Chrome、Safari、Opera。 

14. X[href $ =".jpg"] 

这 种 格式 如 以 下 的 代码 。 


a[href $ =". jpg"] { 
color: red; 


} 


匹配 属性 中 以 . jpg 结尾 的 标签 (正则 匹配 ) ,这 种 格式 其 实 也 属于 属性 选择 器 ,兼容 的 
浏览 器 有 : IE 7 十 \Firefox、Chrome、Safari、Opera。 


15. X[ data— * ="foo" | 
如 果 要 匹配 所 有 的 图 片 链接 ,可 以 通过 下 面 的 CSS 来 实现 。 


a[href $ =". jpg"], 

a[href $ =". jpeg" ], 

a[href $ = ". png"], 

a[href $ = ".gif"] ( 
color: red; 

ji 


但 是 如 果 给 a 标签 添加 一 个 data-filetype 属性 ,就 可 以 使 用 下 面 的 CSS 来 快速 地 选择 
需要 匹配 的 标签 了 。 

<a href = "path/to/image. jpg" data - filetype = "image"> Image Link </a> 

< pre lang = "css"> a[ data — filetype = "image"] { 


color: red; 


i] 


这 种 格式 兼容 的 浏览 器 有 : IE 7+ Firefox, Chrome, Safari, Opera. 
16. X[foo~ ="bar"] 
这 种 格式 如 以 下 的 代码 。 


a[data - info— = "external"] { 
color: red; 


] 


a[data - info— = "image"] { 
border: 1px solid black; 
j: 


匹配 属性 中 具有 多 个 空格 分 隔 的 值 、. 其 中 一 个 值 等 于 "bar" 的 X 元素 。 
这 种 格式 兼容 的 浏览 器 有 : IE 7 十 、Firefox、Chrome、Safari、Opera。 
17. X:checked 

这 种 格式 如 以 下 的 代码 。 

input[type = radio] :checked { 


border: 1px solid black; 
) 


这 个 选择 器 主要 用 于 checkbox, 选 择 checkbox 为 当前 选中 的 那个 标签 。 
这 种 格式 兼容 的 浏览 器 有 : IE 7 十 、Firefox、Chrome、Safari、Opera。 

18. X:after 

这 种 格式 如 以 下 的 代码 。 


.Clearfix:after { 
content: ""; 
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display: block; 
clear: both; 
visibility: hidden; 
font- size: 0; 
height: 0; 

i 


.clearfix { 
x display: inline - block; 
_height: 1%; 

} 


before 和 after 是 在 选择 的 标签 之 前 或 者 之 后 插入 内 容 ,一般 用 于 清除 浮动 ,但 是 对 于 
IE 6、IE 7 是 不 可 用 的 。 这 种 格式 兼容 的 浏览 器 有 : IE 7 十 、Firefox、Chrome、Safari、Opera。 
19. X:hover 
这 种 格式 如 以 下 的 代码 。 


div:hover { 
background: # e3e3e3; 
} 


最 常用 的 就 是 a 标签 了 ,但 是 在 IE 6 浏览 器 下 除了 a 标签 之 外 ,其 他 标签 div:hover 不 
匹配 。 这 种 格式 兼容 的 浏览 器 有 : IE 6+ Firefox, Chrome Safari, Operas 

20. X:not(selector) 

这 种 格式 如 以 下 的 代码 。 


* :not(p) { 
color: green; 


i} 


选择 除了 ( ) 中 选择 器 之 外 的 标签 元 素 。 

这 种 格式 兼容 的 浏览 器 有 : IE 9、Firefox、Chrome、Safari、Opera。 
21. X: :pseudoElement 

这 种 格式 如 以 下 的 代码 。 


p::first- line { 
font ~ weight: bold; 
font ~ size: 1. 2em; 


p::first- letter ( 
float: left; 
font - size: 2em; 
font — weight: bold; 
font - family: cursive; 
padding - right: 2px; 


分 别 用 于 匹配 元 素 的 第 一 行 和 第 一 个 字母 。 这 种 格式 兼容 的 浏览 器 有 : IE 6 十 、 
Firefox.Chrome.Safari.Opera, 

22. X:nth-child(n) 

这 种 格式 如 以 下 的 代码 。 


li:nth- child(3) { 
color: red; 


li 


匹配 X 元素 中 从 头 数 第 几 个 标签 ,例如 ,上 面 的 代码 是 匹配 第 三 个 li 标签。 这 种 格式 
兼容 的 浏览 器 有 : IE 9.Firefox 3. 5 十 .Chrome、Safari、Opera。 

23. X:nth-last-child(n) 

这 种 格式 如 以 下 的 代码 。 


li:nth- last - child(2) { 
color: red; 


} 


与 上 一 个 选择 器 相反 ,这 个 选择 器 是 倒序 匹配 第 几 个 标签 。 上 面 的 代码 的 意思 是 匹配 
倒数 第 二 个 1 标签。 这 种 格式 兼容 的 浏览 器 有 : IE 9、Firefox 3. 5 十 ,Chrome、 Safari, 
Opera。 

24. X:nth-of-type(n) 

这 种 格式 如 以 下 的 代码 。 


ul:nth- of - type(3) { 
border: 1px solid black; 
} 


与 :nth-child() 作 用 类 似 , 但 是 仅 匹 配 使 用 同 种 标签 的 元 素 。 这 种 格式 兼容 的 浏览 器 
有 : IE 9、Firefox 3. 5+ .Chrome.Safari.Opera, 

25. X:nth-last-of-type(n) 

这 种 格式 如 以 下 的 代码 。 

ul:nth- last - of ~- type(3) { 


border: 1px solid black; 
) 


与 :nth-last-child() 作 用 类 似 , 但 是 仅 匹配 使 用 同 种 标签 的 元 素 。 这 种 格式 兼容 的 浏览 
器 有 : IE 9、Firefox 3. 5+ .Chrome.Safari.Opera, 

26. X:first-child 

这 种 格式 如 以 下 的 代码 。 

ul li:first- child { 


border - top: none; 
) 
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匹配 其 父 元 素 的 第 ”个 子 元 素 , 第 一 个 编号 为 1。 这 种 格式 兼容 的 浏览 器 有 : IE 7 十 、 
Firefox .Chrome Safari, Opera, 

27. X:last-child 

这 种 格式 如 以 下 的 代码 。 


ul > li:last-child { 
color: green; 


} 


匹配 其 父 元 素 的 倒数 第 ”个 子 元 素 , 第 一 个 编号 为 1。 这 种 格式 兼容 的 浏览 器 有 : 
IE 9.Firefox.Chrome.Safari.Opera, 

28. X:only-child 

这 种 格式 如 以 下 的 代码 。 


div p:only- child { 
color: red; 


Ü 


匹配 父 元 素 下 仅 有 的 一 个 子 元 素 , 等 同 于 :first-child: last-child 或 :nth-child(1) :nth- 
last-child(1)。 这 种 格式 兼容 的 浏览 器 有 : IE 9、Firefox、Chrome、Safari、Opera。 

29. X:only-of-type 

这 种 格式 如 以 下 的 代码 。 

li:only- of - type ( 


font - weight: bold; 
) 


匹配 父 元 素 下 使 用 同 种 标签 的 唯一 一 个 子 元 素 , 等 同 于 :first-of-type: last-of-type 或 
:nth-of-type (1) ; nth-last-of-type (1)。 这 种 格式 兼容 的 浏览 器 有 : IE 9、Firefox3. 5 十 、 
Chrome, Safari, Opera, 

30. X:first-of-type 

这 种 格式 如 以 下 的 代码 。 

li:only- of - type { 


font ~ weight: bold; 
ji 


匹配 父 元 素 下 使 用 同 种 标签 的 第 一 个 子 元 素 , 等 同 于 :nth-of-type(1)。 这 种 格式 兼容 
的 浏览 器 有 : IE 9.Firefox 3. 5+ .Chrome.Safari.Opera, 


5.3 j 框 


通过 CSS3 可 以 创建 圆 角 边框 ,向 矩形 添加 阴影 ,使 用 图 片 来 绘制 边框 ,并 且 不 需 使 用 
设计 软件 ,比如 Photoshop。 在 本 节 中 将 学 到 以 下 边框 属性 : border-radius, box-shadow 和 


border-image。 

IE 9 支持 border-radius 和 box-shadow, Firefox 支持 所 有 新 的 边框 属性 。Chrome 和 
Safari 支持 border-radius 和 box-shadow ,但 是 对 border-image 的 支持 需要 加 前 级 -webkit-。 
Opera 支持 border-radius 和 box-shadow ,但 是 对 border-image 的 支持 需要 加 前 级 -0-。 

1. CSS3 圆 角 边框 

在 CSS2 中 添加 圆 角 和 矩 形 需要 技巧 ,必须 为 每 个 圆 角 使 用 不 同 的 图 片 。 在 CSS3 中 , 创 
建 圆 角 是 非常 容易 的 ,CSS3 中 的 border-radius 属性 用 于 创建 圆 角 。 

实例 :向 div 元 素 中 添加 圆 角 。 

div 

border:2px solid; 

border - radius:25px; 

— moz — border - radius:25px; / * Old Firefox */ 

J 


2. CSS3 边框 阴影 

在 CSS3 中 ,box-shadow 用 于 向 方 框 中 添加 阴影 。 
实例 :向 div 元 素 中 添加 方 框 阴影 。 

div 

{ 


box- shadow: 10px 10px 5px # 888888; 
} 


3. CSS3 边框 图 片 
通过 CSS3 的 border-image 属性 ,可 以 使 用 图 片 来 创建 边框 : border-image 属性 可 以 规 
定 用 于 边框 的 图 片 。 用 于 创建 上 面 的 边框 的 原始 图 片 如 图 5. 6 所 示 。 


图 5.6 边框 图 片 
实例 : 使 用 图 片 创建 围绕 div 元 素 的 边框 。 


div 

í 

border - image:url(border. png) 30 30 round; 

— moz — border — image:ur1(border. png) 30 30 round; /* 老 的 Firefox * / 

— webkit - border - image:url(border. png) 30 30 round; /x Safari 和 Chrome * / 
— o- border — image:ur1(border. png) 30 30 round; /x Opera * / 

) 
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CSS3 新 的 边框 属性 如 表 5. 1。 
表 5.1 CSS3 新 的 边框 属性 
属 性 描 æ 
border-image 设置 所 有 border-image- * 属性 的 简写 属性 
border-radius 设置 所 有 4 个 border- * -radius 属性 的 简写 属性 
box-shadow 向 方 框 添加 一 个 或 多 个 阴影 


5.4 CSS3 背景 


CSS3 包含 多 个 新 的 背景 属性 ,它们 提供 了 对 背景 更 强大 的 控制 。 在 本 节 将 学 到 以 下 
背景 属性 : background-size .background-origin 。 

Firefox 3. 6 以 及 更 早 的 版 本 不 支持 background-origin 属性 ,对 background-size 的 支 
持 需 要 加 前 级 -moz-。Safari 4 对 新 背景 属性 的 支持 需要 加 前 缀 -webkitr-。IE 9、Firefox 4, 
Chrome, Safari 5 以 及 Opera 支持 新 的 背景 属性 。 

1. CSS3 background-size 属性 

background-size 属性 规定 背景 图 片 的 尺寸 。 在 CSS3 之 前 ,背景 图 片 的 尺寸 是 由 图 片 
的 实际 尺寸 决定 的 。 在 CSS3 中 ,可 以 规定 背景 图 片 的 尺寸 ,这 就 允许 在 不 同 的 环境 中 重复 
使 用 背景 图 片 。 能 够 以 像素 或 百分比 规定 尺寸 。 如 果 以 百分比 规定 尺寸 ,那么 尺寸 是 相对 
于 父 元 素 的 宽度 和 高 度 。 

例如 ,调整 背景 图 片 的 大 小 ,代码 如 下 。 


div 

Í 

background:url(bg_flower. gif); 

— moz - background — size:63px 100px; /* 老 版 本 的 Firefox * / 
background - size:63px 100px; 

background - repeat : no - repeat; 

(i 


例如 ,对 背景 图 片 进行 拉 伸 ,使 其 完成 填充 内 容 区 域 ,代码 如 下 。 


div 

í 

background:ur1(bg_flower. gif); 

— moz — background — size:40% 100%; /* 老 版 本 的 Firefox * / 
background —- size:40% 100% ; 

background - repeat :no — repeat; 

} 


2. CSS3 background-origin 属性 
background-origin 属性 规定 背景 图 片 的 定位 区 域 。 背 景 图 片 可 以 放置 于 content-box、 
padding-box 或 border-box 区 域 , 如 图 5.7 所 示 。 


5.7 background-origin 属性 规定 背景 图 片 的 区 域 
例如 ,在 content-box 中 定位 背景 图 片 ,代码 如 下 。 


div 

{ 

background:url(bg_flower. gif); 

background - repeat :no ~ repeat; 

background —- size:100% 100%; 

— webkit - background - origin:content - box; / * Safari * / 
background - origin:content - box; 

} 


3. CSS3 多 重 背 景 图 片 
CSS3 可 以 为 元 素 使 用 多 个 背景 图 像 。 
例如 ,为 body 元 素 设置 两 幅 背 景 图 片 , 代 码 如 下 。 


body 

{ 

background - image:url(bg_flower. gif),url(bg_flower 2.gif); 
} 


CSS3 新 的 背景 属性 如 表 5. 2 所 示 。 
表 5.2 CSS3 新 的 背景 属性 


属 性 # 3 
background-clip 规定 背景 的 绘制 区 域 
background-origin 规定 背景 图 片 的 定位 区 域 
background-size 规定 背景 图 片 的 尺寸 


5.5 CSS3 文本 效果 


CSS3 包含 多 个 新 的 文本 特性 。 在 本 节 中 将 学 到 如 下 文本 属性 : text-shadow、word- 
wrap 和 text-decoration, 


IE 仍 然 不 支持 text-shadow 属性 。Firefox、Chrome、Safari 以 及 Opera 支持 text- 
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shadow 属性 。 浏 览 器 主流 浏览 器 都 支持 word-wrap 属性 。 
1. CSS3 文本 阴影 
在 CSS3 中 ,text-shadow 可 向 文本 应 用 阴影 ,如 图 5. 8 所 示 。 


图 5.8 CSS3 文本 应 用 阴影 


还 可 以 规定 水 平 了 明 影 垂直 阴影 模糊 距离 ,以 及 阴影 的 颜色 。 下 面 的 代码 是 向 标题 添 
加 阴影 。 

hl 

f 


text — shadow: 5px 5px 5px # FF0000; 
1 


2. CSS3 自动 换行 
如 果 单 词 太 长 的 话 就 可 能 超出 某 个 区 域 。 例 如 


This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long 
word will break and wrap to the next line. 


在 CSS3 中 ,word-wrap 属性 可 以 强制 文本 进行 换行 ,这 意味 着 会 对 单词 进行 拆 分 。 如 
下 面 的 CSS 代码 允许 对 长 单词 进行 拆 分 ,并 换行 到 下 一 行 。 


p {word - wrap:break - word; } 


3. 文 宁 演 染 
CSS3 里 面 开始 支持 对 文字 的 更 深层 次 的 泻 染 , 如 下 面 的 例子 。 


div { 

— webkit - text ~ fill - color: black; 

— webkit - text - stroke - color: red; 

— webkit - text - stroke - width: 2.75px; 
Ji 


这 里 主要 以 Webkit 内 核 浏览 器 为 例 ,效果 如 图 5. 9 所 示 。 


s 


text-fill-color: 文字 内 部 填充 颜色 。 
text-stroke-color: 文字 边界 填充 颜色 。 


text-stroke-width: 文字 边界 宽度 。 
CSS3 新 的 文本 属性 如 表 5. 3 所 示 。 


表 5.3 CSS3 新 的 文本 属性 


属 性 描 述 
hanging-punctuation 规定 标点 字符 是 否 位 于 线 框 之 外 
punctuation-trim 规定 是 否 对 标点 字符 进行 修剪 
text-align-last 设置 如 何 对 齐 最 后 一 行 或 紧 挨 着 强制 换行 符 之 前 的 行 
textremphasis 向 元 素 的 文本 应 用 重点 标记 以 及 重点 标记 的 前 景色 
text-justify 规定 当 text-align 设置 为 justify 时 所 使 用 的 对 齐 方法 
text-outline 规定 文本 的 轮廓 
text-overflow 规定 当 文 本 溢出 包含 元 素 时 发 生 的 操作 
text-shadow 向 文本 添加 阴影 
text-wrap 规定 文本 的 换行 规则 
word-break 规定 非 中 日 韩文 本 的 换行 规则 
word-wrap 允许 对 长 的 不 可 分 割 的 单词 进行 分 割 并 换行 到 下 一 行 

5.6 CSS3 字体 


在 CSS3 之 前 ,Web 设计 师 必 须 使 用 已 在 用 户 计算 机 上 安装 好 的 字体 。 通 过 CSS3， 
Web 设计 师 可 以 使 用 他 们 喜欢 的 任意 字体 。 当 找到 或 购买 到 希望 使 用 的 字体 时 ,可 将 该 字 
体 文件 存放 到 Web 服务 器 上 , 它 会 在 需要 时 被 自动 下 载 到 用 户 的 计算 机 上 。 

用 户 自己 的 字体 是 在 CSS3 @ font-face WIM HEX A. Firefox, Chrome, Safari 以 及 
Opera 支持 . ttf(True Type Fonts) 和 . otf(OpenType Fonts) 类 型 的 字体 。 

IE 9 十 支持 新 的 @font-face 规则 ,但 只 支持 . eot 类 型 的 字体 (Embedded OpenType) 。 

注释 : IE 8 以 及 更 早 的 版 本 不 支持 新 的 @font-face 规则 。 

在 新 的 @font-face 规则 中 ,必须 首先 定义 字体 的 名 称 (比如 myFirstFont) ,然后 指向 该 
字体 文件 。 如 需 为 HTML 元 素 使 用 字体 ,请 通过 font-family 属性 来 引用 字体 的 名 称 
(myFirstFont) 。 


B: 


<style> 
(font - face 
í 
font — family: myFirstFont; 
src: url('Sansation_Light. ttf'), 
ur1( 'Sansation_Light. eot'); fx IE9+ */ 
) 


div 

{ 

font ~ family:myFirstFont; 
} 

</style> 
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例 : 使 用 粗 体 字体 时 必须 为 粗 体 文本 添加 另 一 个 包含 描述 符 的 @fontrface。 


(@ font - face 
| 
font 一 family: myFirstFont; 
src: url('Sansation_Bold. ttf'), 
url( 'Sansation_Bold. eot'); /x IE9+ */ 
font — weight : bold; 
} 


文件 Sansation_Bold. ttf 是 另 一 个 字体 文件 , 它 包含 Sansation 字体 的 粗 体 字 符 。 只 要 
font-family 为 myFirstFont 的 文本 需要 显示 为 粗 体 ,浏览 器 就 会 使 用 该 字体 。 通 过 这 种 方 
式 , 可 以 为 相同 的 字体 设置 许多 @font-face 规则 。 

表 5.4 中 列 出 了 能 够 在 @font-face 规则 中 定义 的 所 有 字体 描述 符 。 


表 5.4 CSS3 字体 描述 符 


描 述 符 值 描 述 
font-family name 必需 。 规 定 字 体 的 名 称 
src URL 必需 。 定 义 字 体 文件 的 URL 
font-stretch * normal 可 选 。 定 义 如 何 拉 伸 字体 。 默 认 是 normal 


* condensed 
* ultra-condensed 
e extra-condensed 
* semi-condensed 
e expanded 
* semi-expanded 
* extra-expanded 
e ultra-expanded 
font-style * normal 可 选 。 定 义 字体 的 样式 。 默 认 是 normal 
° italic 
* oblique 
font-weight 。 normal 可 选 。 定 义 字体 的 粗细 。 默 认 是 normal 
° bold 
° 100 
e 200 
° 300 
° 400 
° 500 
° 600 
° 700 
° 800 
° 900 
unicode-range unicode-range 可 选 。 定 义 字体 支持 的 Unicode 字符 范 
围 。 默 认 是 “U 十 0 一 10FFFF” 


5.7 CSS3 2D 转换 


通过 CSS3 转换 ,能 够 对 元 素 进 行 移动 缩放 、 转 动 、 拉 长 或 拉 伸 。 转 换 是 使 元 素 改变 形 
状 、 尺 寸 和 位 置 的 一 种 效果 。 可 以 使 用 2D 或 3D 转换 来 转换 元 素 。 

IE 9 需要 加 前 级 -ms-。Firefox 需要 加 前 级 -moz-。Chrome 和 Safari 需要 加 前 级 
-webkit-。Opera 需要 加 前 级 -0-。 

在 本 节 中 ,将 学 到 如 下 2D 转换 方法 。 

(1) translate() : 移动 。 

(2) rotate(); 旋转 。 

(3) scale() : 绽放 。 

(4) skewO : 以 给 定 的 角度 转动 。 

(5) matrix() : 旋转 ,缩放 ,移动 以 及 倾斜 元 素 。 


transform: rotate(30deg); 


— ms — transform: rotate(30deg); /* IE9 x / 

— webkit - transform: rotate(30deg); /* Safari and Chrome * / 
— o- transform: rotate(30deg) ; /* Opera * / 

— moz — transform: rotate(30deg); /x Firefox */ 


) 


(1) translate() 方 法 : 通过 translate() 方 法 ,根据 给 定 的 left(x 坐标 ) 和 top(y 坐标 ) 位 
置 参数 ,元 素 从 其 当前 位 置 移动 。 

例 : 

div 

{ 

transform: translate(50px,100px); 


— ms — transform: translate(50px, 100px) ; /x IE9 x / 

— webkit - transform: translate(50px, 100px) ; /* Safari and Chrome * / 
— o- transform: translate(50px, 100px); /x Opera */ 

— moz — transform: translate(50px, 100px) ; /x Firefox */ 


} 


值 translate(50px,100px) 把 元 素 从 左 侧 移动 50 像素 ,从 顶端 移动 100 像素 。 
(2) rotate() 方 法 : 通过 rotate() 方 法 .元素 顺 时 针 旋 转 给 定 的 角度 。 允 许 负 值 ,元素 将 
闭 时 针 旋 转 。 
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transform: rotate(30deg); 


— ms — transform: rotate(30deg); /x IE9 x / 

— webkit — transform: rotate(30deg); /x Safari and Chrome * / 
— o- transform: rotate(30deg); /* Opera * / 

— moz — transform: rotate(30deg); /x Firefox * / 


ji 


值 rotate(30deg) 表 示 把 元 素 顺 时 针 旋 转 30°. 
(3) scale() 方 法 : 通过 scale() 方 法 ,根据 给 定 的 宽度 (X 轴 ) 和 高 度 (Y 轴 ) 参 数 ,元 素 的 
尺寸 会 增加 或 减少 。 


B: 

div 

{ 

transform: scale(2, 4); 

— ms — transform: scale(2,4); /x IE9 */ 

— webkit - transform: scale(2,4); /* Safari 和 Chrome * / 
— o- transform: scale(2,4); /* Opera * / 

— moz — transform: scale(2,4); /* Firefox * / 

) 


值 scale(2,4) 表 示 把 宽度 转换 为 原始 尺寸 的 2 倍 ,把 高 度 转 换 为 原始 高 度 的 4 倍 。 

(4) skew() 方 法 : 通过 skew() 方 法 ,根据 给 定 的 水 平 线 (X 轴 ) 和 垂直 线 (Y 轴 ) 参 数 ， 
元 素 转动 给 定 的 角度 。 

fl: 

div 

{ 

transform: skew(30deg,20deg); 


— ms — transform: skew(30deg, 20deg) ; /x IE9 * / 

— webkit - transform: skew(30deg, 20deg) ; /* Safari and Chrome * / 
— o- transform: skew(30deg, 20deg) ; /* Opera * / 

— moz — transform: skew(30deg, 20deg) ; /x Firefox * / 

} 


值 skew(30deg,20deg) 表 示 围 绕 X 轴 把 元 素 转动 30" ,围绕 Y 轴 转 动 20"。 

(5) matrix() 方 法 : matrix() 方 法 把 所 有 2D 转换 方法 组 合 在 一 起 ,需要 6 个 参数 ,包括 
数学 函数 ,可 以 旋转 、 缩 放 、 移 动 以 及 倾斜 元 素 。 

例如 ,使 用 matrix 方法 将 div 元 素 旋转 30°. 


div 

transform:matrix(0.866,0.5, - 0.5,0.866,0,0); 

— ms — transform:matrix(0.866,0.5, -— 0.5,0.866,0,0); 7 IE9 * / 

— moz — transform:matrix(0.866,0.5, — 0.5,0.866,0,0); /x Firefox * / 

— webkit - transform:matrix(0.866,0.5, — 0.5,0.866,0,0); /* Safari and Chrome * / 
— o- transform:matrix(0.866,0.5, — 0.5,0.866,0,0); f * Opera * / 


) 


表 5.5 中 列 出 了 所 有 的 转换 属性 。 


表 5.5 转换 属性 
属 性 描 述 
transform 向 元 素 应 用 2D 3D 转换 
transform-origin 允许 改变 被 转换 元 素 的 位 置 
2D Transform 方法 如 表 5.6 所 示 。 
表 5.6 转换 方法 
B 人 性 #r æ 
matrix(n,n,n,n,n,n) 定义 2D 转换 ,使 用 6 个 值 的 矩阵 
translate(x,y) 定义 2D 转换 , 沿 着 X 和 YY 轴 移 动 元 素 
translateX(n) 定义 2D 转换 , 沿 着 X 轴 移 动 元 素 
translateY (n) 定义 2D 转换 , 沿 着 Y 轴 移 动 元 素 
scale(x,y) 定义 2D 缩放 转换 ,改变 元 素 的 宽度 和 高 度 
scaleX(n) 定义 2D 缩放 转换 ,改变 元 素 的 宽度 
scaleY(n) 定义 2D 缩放 转换 ,改变 元 素 的 高 度 
rotate(angle) 定义 2D 旋转 ,在 参数 中 规定 角度 
skew(x-angle, y-angle) 定义 2D 倾斜 转换 , 沿 着 X 和 YY 轴 
skewX (angle) 定义 2D 倾斜 转换 , 沿 着 X 轴 


skewY (angle) 


定义 2D 倾斜 转换 , 沿 着 Y 轴 


5.8 CSS3 3D 转换 


CSS3 可 以 使 用 3D 转换 来 对 元 素 进 
方法 : rotateX() ,rotateY() 。 

转换 是 使 元 素 改 变形 状 `. 尺寸 和 位 
元 素 


Chrome 和 Safari 需要 加 前 级 -webkit-。 


行 格式 化 。 在 本 节 中 ,将 学 到 其 中 的 一 些 3D 转换 


置 的 一 种 效果 。 可 以 使 用 2D 或 3D 转换 来 转换 


IE 和 Opera 仍然 不 支持 3D 转换 ( 仅 支 持 2D 转换 )。Firefox 需要 加 前 缀 -moz-。 


(1) rotateX() 方 法 : 通过 rotateX() 方 法 ,元 素 围绕 其 X 轴 以 给 定 的 度数 进行 旋转 。 


例 : 


div 

í 

transform: rotateX(120deg); 

— webkit - transform: rotateX(120deg) ; 
— moz — transform: rotateX(120deg) ; 

ji 


/* Safari 和 Chrome * / 
/x Firefox * / 
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(2) rotateY() 旋 转 : 通过 rotateY() 方 法 ,元 素 围 绕 其 Y 轴 以 给 定 的 度数 进行 旋转 


transform: rotateY(130deg) ; 

— webkit — transform: rotateY(130deg); 
— moz — transform: rotateY(130deg) ; 

} 


表 5.7 中 列 出 了 所 有 的 转换 属性 。 


/* Safari 和 Chrome * / 
/x Firefox * / 
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属 性 


描 述 


transform 
transform-origin 
transform-style 


perspective 


向 元 素 应 用 2D 或 3D 转换 

允许 改变 被 转换 元 素 的 位 置 

规定 被 嵌 套 元 素 如 何在 3D 空间 中 显示 
规定 3D 元 素 的 透视 效果 


perspective-origin 规定 3D 元 素 的 底部 位 置 
backface-visibility 定义 元 素 在 不 面 对 屏 幕 时 是 否 可 见 
转换 方法 如 表 5. 8 所 示 。 
表 5.8 转换 方法 


K 数 


描 æ 


matrix3dCny,nynynynynynynynynynynynynynyn) 
translate3d(x,y,z) 
translateX( x) 
translateY (y) 
translateZ(z) 
scale3d(x,y,z) 
scaleX(x) 

scaleY(y) 

scaleZ(z) 
rotate3d(x,y,z,angle) 
rotateX(angle) 
rotateY (angle) 
rotateZ(angle) 


perspective(n) 


定义 3D 转换 ,使 用 16 个 值 的 4X4 SE £ 
定义 3D 转化 

定义 3D 转化 , 仅 使 用 用 于 X 轴 的 值 

定义 3D 转化 , 仅 使 用 用 于 Y 轴 的 值 

定义 3D 转化 , 仅 使 用 用 于 Z 轴 的 值 

定义 3D 缩放 转换 

定义 3D 缩放 转换 ,通过 给 定 一 个 X 轴 的 值 
定义 3D 缩放 转换 ,通过 给 定 一 个 立轴 的 值 
定义 3D 缩放 转换 ,通过 给 定 一 个 Z 轴 的 值 
定义 3D 旋转 

定义 沿 X 轴 的 3D 旋转 

定义 沿 Y 轴 的 3D 旋转 

定义 沿 Z 轴 的 3D 旋转 

定义 3D 转换 元 素 的 透视 视图 


5.9 CSS3 过 渡 


通过 CSS3 可 以 在 不 使 用 Flash 动画 或 JavaScript 的 情况 下 , 当 元 素 从 一 种 样式 变换 为 


另 一 种 样式 时 为 元 素 添加 效果 。 


IE 不 支持 transition JA FE, Firefox 4 需要 加 前 级 -moz-。Chrome 和 Safari 需要 加 前 
级 -webkit-。Opera 需要 加 前 级 -0-。 

CSS3 过 渡 是 元 素 从 一 种 样式 逐渐 改变 为 另 一 种 的 效果 。 要 实现 这 一 点 ,必须 规定 以 
下 两 项 内 容 。 

(1) 规定 把 效果 添加 到 哪个 CSS 属性 上 。 

(2) 规定 效果 的 时 长 。 

例 : 应 用 于 宽度 属性 的 过 渡 效 果 , 时 长 为 2s。 


div 

{ 

transition: width 2s; 

— moz — transition: width 2s; /x Firefox 4 * / 

— webkit ~ transition: width 2s; / * Safari 和 Chrome * / 
— o- transition: width 2s; /* Opera */ 

Í 


注释 : 如 果 时 长 未 规定 , 则 不 会 有 过 渡 效 果 , 因 为 默认 值 是 0。 
例 : 规定 当 鼠 标 指针 悬浮 于 过 div 之 元 素 上 时 。 


div:hover 

i 
width:300px; 
y 


注释 : 当 指针 移出 元 素 时 , 它 会 逐渐 变 回 原来 的 样式 。 
多 项 改变 :如 需 向 多 个 样式 添加 过 渡 效 果 ,请 添加 多 个 属性 ,由 逗号 隔 开 。 
例 : 向 宽度 .高度 和 转换 添加 过 渡 效 果 ,代码 如 下 。 


div 

transition: width 2s, height 2s, transform 2s; 

— moz —- transition: width 2s, height 2s, - moz- transform 2s; 

— webkit - transition: width 2s, height 2s, — webkit - transform 2s; 
— o- transition: width 2s, height 2s, — o- transform 2s; 


li 


# 5. 9 中 列 出 了 所 有 的 转换 属性 。 


表 5.9 转换 属性 
属 性 描 述 
transition 简写 属性 ,用 于 在 一 个 属性 中 设置 4 个 过 渡 属 性 
transition-property 规定 应 用 过 渡 的 CSS 属性 的 名 称 
transition-duration 定义 过 渡 效 果 花 费 的 时 间 ,默认 是 0 
transition-timing-function 规定 过 渡 效 果 的 时 间 曲 线 ,默认 是 ease 
transition-delay 规定 过 渡 效 果 何 时 开始 ,默认 是 0 
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下 面 的 两 个 例子 设置 所 有 过 渡 属 性 。 
例 : 以 下 代码 中 使 用 了 所 有 过 渡 属 性 。 


div 

Í 

transition- property: width; 

transition- duration: 1s; 

transition- timing ~ function: linear; 
transition- delay: 2s; 

/* Firefox 4 */ 

— moz— transition - property:width; 

— moz - transition - duration:1s; 

— moz — transition - timing- function: linear; 
— moz - transition - delay:2s; 

/* Safari 和 Chrome * / 

— webkit - transition ~ property:width; 

— webkit - transition - duration:1s; 

— webkit - transition - timing- function: linear; 
— webkit - transition - delay:2s; 

/x Opera * / 

— o- transition ~ property:width; 

— o- transition - duration:1s; 

— o- transition ~ timing- function: linear; 
— o- transition - delay:2s; 


1 


下 面 的 代码 与 上 面 的 例子 具有 相同 的 过 渡 效 果 , 但 是 使 用 了 简写 的 transition 属性 。 


div 

{ 

transition: width ls linear 2s; 

/x Firefox 4 * / 

— moz — transition:width 1s linear 2s; 
/* Safari and Chrome * / 

— webkit - transition:width 1s linear 2s; 
/* Opera */ 

— o- transition:width 1s linear 2s; 


) 


5.10 CSS3 渐变 效果 


渐变 效果 分 为 线性 渐变 和 径 向 渐变 效果 。 
A) 线性 渐变 : 左上 (0% 0%) 到 右上 (0% 100%) 即 从 左 到 右 水 平 渐 变 , 以 下 的 代码 实 
现 了 左 到 右 的 渐变 。 


background- image: — webkit — gradient(linear,0% 0%,100% 0% ,from( #2A8BBE), to( #FE280E)); 


这 里 linear KR REME , MEH , H H E (H 2A8BBE) #J#r € ( # FF280E) J W E , 
效果 如 图 5. 10 所 示 。 


图 5.10 线性 渐变 
同 理 , 也 可 以 有 从 上 到 下 ,任何 颜色 间 的 渐变 转换 ,效果 如 图 5. 11 所 示 。 


图 5.11 任何 颜色 间 的 渐变 转换 
还 有 复杂 一 点 儿 的 渐变 ,如 水 平 渐 变 ,33% 处 为 绿色 ,66% 处 为 橙色 。 


background - image: - webkit — gradient (linear,0% 0%,100% 0% ,from( #2A8BBE), 
color - stop(0. 33, # AAD010), color - stop(0. 33, #FF7F00), to( # FE280E)) ; 


2 


E HJ color 一 stop 为 拐点 ,效果 如 图 5.12 所 示 。 


yn non: 


图 5.12 复杂 的 渐变 
(2) 径 向 渐变 : 径 向 渐变 不 是 从 一 个 点 到 一 个 点 的 渐变 ,而 是 从 一 个 圆 到 一 个 圆 的 渐 
变 。 不 是 放射 渐变 而 是 径 向 渐变 。 来 看 一 个 例子 ,代码 如 下 。 


backgroud: 
— webkit - gradient (radial,50 50,50,50 50,0, from(black),color — stop(0.5, red), to(blue)); 


前 面 “50,50,50? 是 起 始 圆 的 圆心 坐标 和 半径 ,“50,50,0? 是 目标 圆 的 圆心 坐标 和 半径 ， 
“color-stop(0.5,red)” 是 断 点 的 位 置 和 色彩 。 这 里 需要 说 明 一 下 ,和 放射 由 内 至 外 不 一 样 ， 
径 向 渐变 刚好 相反 ,是 由 外 到 内 的 渐变 。 代 码 中 标识 的 是 两 个 同心 圆 ,外 圆 半 径 为 50px, 内 
圆 半径 为 0, 那么 就 是 从 黑色 到 红色 再 到 蓝 色 的 正 圆 形 渐变 。 如 图 5. 13 所 示 就 是 这 段 代码 
的 效果 。 


图 5.13 径 向 渐变 
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如 果 给 目标 源 一 个 大 于 0 的 半径 ,将 会 看 到 另外 一 个 效果 。 


backgroud: 
— webkit - gradient(radial,50 50,50,50 50, 10, from(black), color - stop(0.5,red),to(blue)); 


这 里 给 目标 圆 半 径 为 10 ,效果 如 图 5. 14 所 示 。 


5.14 径 向 渐变 


可 以 看 到 ,会 有 一 个 半径 为 10 的 纯 蓝 的 圆 在 最 中 间 ,这 就 是 设置 目标 圆 半径 的 效果 。 
现在 再 改变 一 下 ,不 再 是 同心 圆 了 ,内 圆 圆心 向 有 20px 偏 移 。 


backgroud: 
— webkit - gradient (radial,50 50,50,70 50,10, from(black), color - stop(0. 5, red), to(blue)); 


这 里 给 目标 圆 半 径 还 是 10, 但 是 圆心 偏 移 为 “70,50”( 起 始 圆 圆心 为 “50,50”) 效 果 如 
图 5.15 所 示 。 


图 5.15 径 向 渐变 
再 来 制作 一 个 来 自 项 部 的 漫 射 光 , 类 似 于 开 了 孝 灯 ,代码 如 下 ,其 效果 如 图 5.16 所 示 。 


backgroud: 
— webkit - gradient (radial,50 50,50,50 1,0,from(black), to(white)); 


5.16 径 向 渐变 


5.11 CSS3 反射 效果 


反射 的 效果 就 像 水 中 的 倒影 ,其 设置 也 很 简单 ,参考 如 下 代码 。 


.ClassReflect{ 

— webkit - box - reflect: below 10px 

— webkit - gradient( linear, left top, left bottom, from(transparent), 
to(rgba(255, 255, 255, 0.51))); 

Ji 


主要 关注 “-webkit-box-reflect: below 10px”, 它 表示 反射 在 元 素 下 方 10px 的 地 方 ,再 


配 上 渐变 效果 ,效果 图 如 图 5. 17 所 示 。 


Web 2.0 
AAGD Sa 


图 5.17 反射 效果 


5.12 CSS3 动画 


通过 CSS3 可 以 创建 动画 ,这 可 以 在 许多 网 页 中 取代 动画 图 片 、Flash 动画 以 及 


JavaScript。 如 需 在 CSS3 中 创建 动画 ,需要 学 习 @keyframes 规则 。 


@keyframes 规则 用 于 创建 动画 。 在 @keyframes 中 规定 某 项 CSS 样式 ,就 能 创建 由 当 


前 样式 逐渐 改 为 新 样式 的 动画 效果 。 


IE 仍然 不 支持 @keyframes 规则 或 动画 属性 。Firefox 需要 加 前 级 -moz-。Chrome 和 


Safari 需要 加 前 缀 -webkit-。Opera 需要 加 前 组 -o-。 
例 : 


@keyframes myfirst 

{ 

from {background: red;} 
to {background: yellow;} 
} 


@ - moz — keyframes myfirst /* Firefox */ 
í 
from (background: red; ) 
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to (background: yellow; } 


} 


@ - webkit — keyframes myfirst /* Safari 和 Chrome * / 


í 


from (background: red; } 
to (background: yellow;} 


ji 


@ - o- keyframes myfirst / * Opera * / 


{ 


from (background: red; } 
to (background: yellow; } 


ji 


当 在 @keyframes 中 创建 动画 时 ,应 把 它 拥 绑 到 某 个 选择 器 ,否则 不 会 产生 动画 效果 。 
通过 规定 至 少 以 下 两 项 CSS3 动画 属性 , 即 可 将 动画 绑 定 到 选择 器 。 

(1) 规定 动画 的 名 称 。 

(2) 规定 动画 的 时 长 。 

l|: 把 myfirst 动画 捆绑 到 div 元 素 , 时 长 5s。 


div 

t 

animation: myfirst 5s; 

— moz — animation: myfirst 5s; /* Firefox * / 

— webkit - animation: myfirst 5s; /x* Safari 和 Chrome * / 
— o- animation: myfirst 5s; /* Opera * / 


1 


注释 : 必须 定义 动画 的 名 称 和 时 长 。 如 果 忽 略 时 长 , 则 动画 不 会 允许 ,因为 默认 值 是 0。 

可 以 使 用 百分比 来 规定 变化 发 生 的 时 间 , 或 用 关键 词 “from” 和 "to”, 等 同 于 0% 和 
100%。0% 是 动画 的 开始 ,100% 是 动画 的 完成 。 

为 了 得 到 最 佳 的 浏览 器 支持 ,应 该 始终 定义 0% 和 100% 选 择 器 。 

例 : 当 动画 25% 及 50% 时 改变 背景 色 , 然 后 当 动 画 100% 完 成 时 再 次 改变 。 


@keyframes myfirst 


{ 


0% (background: 
25% (background: 
50% (background: 
100 % (background: 


) 


red;) 
yellow;) 
blue;) 
green;) 


@ - moz - keyframes myfirst / * Firefox * / 


t 


0% (background: 


red;) 


25% (background: yellow;} 
50% (background: blue;) 
100% (background: green;) 
} 


@ - webkit - keyframes myfirst /* Safari 和 Chrome */ 


0% {background: red;} 
25% (background: yellow;} 
50% (background: blue;) 
100% (background: green;) 


@ - o- keyframes myfirst / * Opera * / 
{ 

O% {background: red;} 

25% {background: yellow;} 

50% (background: blue;} 

100 % (background: green; } 

i 


例 : 改变 背景 色 和 位 置 。 


@keyframes myfirst 

i 

0% (background: red; left:0px; top:0px;} 

25% (background: yellow; left:200px; top:0px; } 
50% (background: blue; left:200px; top:200px;) 
75% (background: green; left:0px; top:200px;} 
100% (background: red; left:0px; top:0px;} 


@ - moz - keyframes myfirst / * Firefox * / 

{ 

0% (background: red; left:0px; top:0px; } 

25% (background: yellow; left:200px; top:0px; } 
50 % {background: blue; left:200px; top:200px; } 
75% {background: green; left:0px; top:200px; } 
100% (background: red; left:0px; top:0px; } 


@ - webkit - keyframes myfirst / * Safari 和 Chrome * / 


0% (background: red; left:0px; top:0px; } 
25% (background: yellow; left:200px; top:0px; } 
50 % {background: blue; left:200px; top:200px; } 
73s {background: green; left:0px; top:200px; } 
100% (background: red; left:0px; top:0px;} 
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@ - o- keyframes myfirst /* Opera * / 


Í. 
0% {background: 


red; left:0px; top:0px; } 


25% (background: yellow; left:200px; top:0px;} 
50% {background: blue; left:200px; top:200px; } 
75% {background: green; left:0px; top:200px; } 
100% (background: red; left:0px; top:0px;} 


K 5.10 中 列 出 了 @keyframes 规则 和 所 有 动画 属性 。 


35.10 @keyframes 规则 和 所 有 动画 属性 


属 性 描 述 
(@keyframes 规定 动画 
animation 所 有 动画 属性 的 简写 属性 ,除了 animation-play-state 属性 
animation-name 规定 @keyframes 动画 的 名 称 


animation-duration 
animation-timing-function 
animation-delay 
animation-iteration-count 


animation-direction 


规定 动画 是 否 正在 运行 或 暂停 。 默 认 是 running 


animation-play-state 


规定 动画 完成 一 个 周期 所 花费 的 时 间 ( 秒 或 毫秒 ) ,默认 是 0 
规定 动画 的 速度 曲线 。 默 认 是 ease 

规定 动画 何 时 开始 。 默 认 是 0 

规定 动画 被 播放 的 次 数 。 默 认 是 1 

规定 动画 是 否 在 下 一 周期 逆向 地 播放 。 默 认 是 normal 


下 面 的 两 个 例子 设置 了 所 有 动画 属性 。 
例 : 设置 所 有 动画 属性 。 


div 

i 

animation - name: myfirst; 

animation - duration: 5s; 

animation - timing- function: linear; 
animation - delay: 2s; 

animation - iteration ~ count: infinite; 
animation - direction: alternate; 

animation - play - state: running; 

/x Firefox: */ 

— moz — animation - name: myfirst; 

— moz — animation ~ duration: 5s; 

— moz — animation ~ timing- function: linear; 
— moz — animation ~ delay: 2s; 

— moz — animation ~ iteration- count: infinite; 
— moz — animation ~ direction: alternate; 

— moz — animation ~ play — state: running; 

/* Safari 和 Chrome: * / 

— webkit - animation - name: myfirst; 


— webkit - animation - duration: 5s; 

— webkit - animation - timing- function: linear; 
— webkit - animation - delay: 2s; 

— webkit ~ animation — iteration - count: infinite; 
— webkit ~ animation - direction: alternate; 

— webkit - animation - play - state: running; 

/* Opera: * / 

— o- animation - name: myfirst; 

— o- animation - duration: 5s; 

— o— animation - timing- function: linear; 

— o— animation - delay: 2s; 

— o- animation - iteration- count: infinite; 

— o— animation - direction: alternate; 

— o- animation - play - state: running; 


} 
例 : 与 上 面 的 动画 相同 ,但 是 使 用 了 简写 的 动画 animation 属性 。 


div 

animation: myfirst 5s linear 2s infinite alternate; 

/* Firefox: */ 

— moz ~ animation: myfirst 5s linear 2s infinite alternate; 
/* Safari 和 Chrome: * / 

— webkit - animation: myfirst 5s linear 2s infinite alternate; 
/* Opera: * / 

— o- animation: myfirst 5s linear 2s infinite alternate; 


y 


5.13 CSS3 多 列 


通过 CSS3, 可 以 创建 多 个 列 来 对 文本 进行 布局 ,在 本 节 中 将 学 习 如 下 多 列 属性 : 
column-count .column-gap 和 column-rule。 

IE 不 支持 多 列 属性 。Firefox 需要 加 前 级 -moz-。Chrome 和 Safari 需要 加 前 级 -webkit-。 

column-count 属性 规定 元 素 应 该 被 分 隔 的 列 数 。 

例 : 把 div 元 素 中 的 文本 分 隔 为 三 列 。 


div 

一 moz — column — count : 3; /* Firefox * / 

— webkit - column — count:3; /* Safari 和 Chrome * / 
column — count:3; 

) 


column-gap 属性 规定 列 之 间 的 间隔 。 
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例 : 规定 列 之 间 40px 的 间隔 。 


div 

— moz — column — gap: 40px; /x Firefox * / 

— webkit - column - gap:40px; f * Safari 和 Chrome * / 
column — gap: 40px; 

li 


column-rule 属性 设置 列 之 间 的 宽度 .样式 和 颜色 规则 。 
例 : 规定 列 之 间 的 宽度 ,样式 和 颜色 规则 。 


div 

{ 

— moz — column - rule:3px outset # ff0000; /* Firefox */ 

— webkit - column - rule:3px outset # ff0000; /* Safari fll Chrome */ 
column - rule: 3px outset # ff0000; 

} 


K 5. 11 中 列 出 了 所 有 的 转换 属性 。 


表 5.11 转换 属性 
属 性 # R 
column-count 规定 元 素 应 该 被 分 隔 的 列 数 
column-fill 规定 如 何 填充 列 
column-gap 规定 列 之 间 的 间隔 
column-rule 设置 所 有 column-rule- * 属性 的 简写 属性 
column-rule-color 规定 列 之 间 规 则 的 颜色 
column-rule-style 规定 列 之 间 规 则 的 样式 
column-rule-width 规定 列 之 间 规则 的 宽度 
column-span 规定 元 素 应 该 横 跨 的 列 数 
column-width 规定 列 的 宽度 
columns 规定 设置 column-width 和 column-count 的 简写 属性 


5.14 CSS3 用 户 界 面 


在 CSS3 中 ,新 的 用 户 界 面 特性 包括 重 设 元 素 尺 寸 、 盒 尺寸 以 及 轮廓 等 。 在 本 节 中 ,将 
学 到 以 下 用 户 界 面 属 性 : resize.box-sizing 和 outline-offset。 

Firefox 4 十 .Chrome 以 及 Safari 支持 resize 属性 。IE,Chrome,Opera 支持 box-sizing 
属性 。Firefox 需要 加 前 缀 -moz-。Safari 需要 加 前 缀 -webkit-。 所 有 主流 浏览 器 都 支持 
outline-offset 属性 ,除了 IE。 

resize 属性 规定 是 否 可 由 用 户 调整 元 素 尺寸 。 


例 : 规定 div 元 素 可 由 用 户 调 整 大 小 。 


div 

t 

resize:both; 
overflow:auto; 


} 


box-sizing 属性 允许 以 确切 的 方式 定义 适应 某 个 区 域 的 具体 内 容 。 
例 : 规定 两 个 并 排 的 带 边 框 方 框 。 
div 


| 
box — sizing:border - box; 


— moz — box — sizing:border - box; /* Firefox * / 
— webkit - box — sizing:border - box; /* Safari * / 
width:50 % ; 

float:left; 


j: 


outline-offset 属性 对 轮廓 进行 偏 移 ,并 在 超出 边框 边缘 的 位 置 绘制 轮廓 。 


轮廓 与 边框 有 以 下 两 点 不 同 。 

(1) 轮廓 不 占用 空间 。 

(2) 轮廓 可 能 是 非 矩形 。 

B: 规定 边框 边缘 之 外 15px 处 的 轮廓 。 
div 

border:2px solid black; 

outline:2px solid red; 


outline- offset:15px; 


表 5.12 中 列 出 了 所 有 的 转换 属性 。 


表 5.12 转换 属性 
属 性 描 Ë 

appearance 允许 将 元 素 设 置 为 标准 用 户 界 面 元 素 的 外 观 
box-sizing 允许 以 确切 的 方式 定义 适应 某 个 区 域 的 具体 内 容 
icon 为 创作 者 提供 使 用 图 标 化 等 价 物 来 设置 元 素 样式 的 能 力 
nav-down 规定 在 使 用 arrow-down 导航 键 时 向 何 处 导航 
nav-index 设置 元 素 的 Tab 键 控制 次 序 
nav-left 规定 在 使 用 arrow-left 导航 键 时 向 何 处 导航 
nav-right 规定 在 使 用 arrow-right 导航 键 时 向 何 处 导航 
nav-up 规定 在 使 用 arrow-up 导航 键 时 向 何 处 导航 
outline-offset 对 轮廓 进行 偏 移 , 并 在 超出 边框 边缘 的 位 置 绘制 轮廓 
resize 规定 是 否 可 由 用 户 对 元 素 的 尺寸 进行 调整 
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5.15 Media Queries 


Media Queries 翻译 过 来 就 是 “媒体 查询 ”的 意思 ,Web 页 面 中 head 部 分 常 看 到 这 样 的 
一 段 代码 : 


< link href = "css/reset. css" rel = "stylesheet" type = "text/css" media = "screen" /> 
< link href = "css/style. css" rel = "stylesheet" type = "text/css" media = "all" /> 
< link href = "css/print. css" rel = "stylesheet" type = "text/css" media = "print" /> 


或 者 这 样 的 形式 : 


< style type = "text/css" media = "screen"> 
(import url("css/style. css"); 
</style> 


两 种 方式 引入 CSS 样式 都 有 一 个 共同 的 属性 media, 而 这 个 media 就 是 用 来 指定 特定 
的 媒体 类 型 ,在 HTML4 和 CSS2 中 允许 使 用 media 来 指定 特定 的 媒体 类 型 ,如 屏幕 
(screen) 和 打印 (print) 的 样式 表 等 。 

CSS3 中 的 Media Queries 增加 了 更 多 的 媒体 查询 ,同时 可 以 添加 不 同 的 媒体 类 型 的 表 
达 式 用 来 检查 媒体 是 否 符合 某 些 条 件 ,如果 媒体 符合 相应 的 条 件 ,那么 就 会 调用 对 应 的 样式 
表 。 简 单 地 说 ,“ 在 CSS3 中 可 以 设置 不 同类 型 的 媒体 条 件 , 并 根据 对 应 的 条 件 , 给 相应 符合 
条 件 的 媒体 调用 相对 应 的 样式 表 ”。 

现在 最 常见 的 一 个 例子 ,用 户 可 以 同时 给 PC 的 大 屏幕 和 移动 设备 设置 不 同 的 样式 表 。 
这 个 功能 是 非常 强大 的 , 它 可 以 让 用 户 定制 不 同 的 分 辩 率 和 设备 ,并 在 不 改变 内 容 的 情况 
下 ,让 用 户 制作 的 Web 页 面 在 不 同 的 分 辩 率 和 设备 下 都 能 显示 正常 ,并 且 不 会 因此 而 丢失 

首先 来 看 一 个 简单 的 实例 : 


< link rel = "stylesheet" media = "screen and (max — width: 600px)" href = "small. css" /> 


上 面 的 media 语句 表示 的 是 : 当 页 宽度 小 于 或 等 于 600px 时 ,调用 small. css 样式 表 来 
泻 染 Web 页 面 。 首 先 来 看 media 的 语句 中 包含 的 内 容 。 

(1) screen: 指 的 是 一 种 媒体 类 型 。 

(2) and; 被 称 为 关键 词 ,与 其 相似 的 还 有 not,only。 

(3) (max-width:600px): 这 个 就 是 媒体 特性 ,说 得 通俗 一 点 儿 就 是 媒体 条 件 。 

前 面 这 个 简单 的 实例 引出 两 个 概念 性 的 东西 ,媒体 类 型 (Media Type) 和 媒体 特性 
(Media Query) ,首先 一 起 来 理解 一 下 这 两 个 概念 。 

1. 媒体 类 型 

媒体 类 型 (Media Type) 在 CSS2 中 是 一 个 常见 的 属性 ,也 是 一 个 非常 有 用 的 属性 ,可 以 
通过 媒体 类 型 对 不 同 的 设备 指定 不 同 的 样式 ,在 CSS2 中 常 碰 到 的 就 是 all( 全 部 ), sereen 
(屏幕 ) ,print( 页 面 打印 或 打印 预览 模式 )。 其 实 媒体 类 型 不 止 这 三 种 , W3C 总 共 列 出 了 10 


种 媒体 类 型 。 页 面 中 引入 媒体 类 型 的 方法 也 有 多 种 ,如 下 。 
1) link 方法 引入 


< link rel = "stylesheet" type = "text/css" href = "../css/print.css" media = "print" /> 


2) xml 方式 引入 


<?xml — stylesheet rel = "stylesheet" media = "screen" href = "css/style.css"?> 


3) @import 方式 引入 

@import 引入 有 两 种 方式 ,一 种 是 在 样式 文件 中 通过 @import 调用 别 一 个 样式 文件 ; 
另 一 种 方法 是 在 二 head 二 二 /head 盖 中 的 二 style 二 … 一 /style 二 中 引入 ,但 这 种 使 用 方法 在 
IE 6 #ll IE 7 中 都 不 被 支持 ,如 一 个 样式 文件 中 调用 另 一 个 样式 文件 ; 


@import url("css/reset. css") screen; 
@import url("css/print. css") print; 


YE <head> </head> P Hj <style> -</style> P WH : 


< head> 
< style type = "text/css"> 
@import url("css/style. css") all; 
</style> 

</head> 


4) @media 引入 
这 种 引入 方式 和 @import 是 一 样 的 ,也 有 以 下 两 种 方式 。 
(1) 样式 文件 中 使 用 : 


@media screen{ 
选择 器 { 
属性 : 属性 值 ; 
j; 
} 


(2) ÆE<head> </head> H H< style> </style> P BJ H: 


< head> 

< style type = "text/css"> 

(@media screen{ 

选择 器 { 
属性 : 属性 值 ; 
} 

1 

</style> 
</head> 
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以 上 几 种 方法 都 有 其 各 自 的 利 整 ,在 实际 应 用 中 建议 使 用 第 一 种 和 第 四 种 ,因为 这 两 种 
方法 是 在 项 目 制作 中 常用 的 方法 。 

2. 媒体 特性 

前 面 有 简单 的 提 到 ,Media Query 是 CSS3 对 Media Type 的 增强 版 ,其 实 可 以 将 Media 
Query 看 成 Media Type( 判 断 条 件 ) 十 CSS( 符 合 条 件 的 样式 规则 ) ,常用 的 特性 W3C 共 列 出 
来 13 种 ,具体 可 以 参阅 Media Features。 为 了 深刻 理解 Media Query ,再 次 回 到 前 面 的 实 
例 上 : 


< link rel = "stylesheet" media = "screen and (max — width: 600px)" href = "small. css" /> 


转换 成 CSS 中 的 写法 为 : 


(@media screen and (max — width: 600px) { 
选择 器 { 
属性 : 属性 值 ; 
} 
} 


其 实 就 是 把 small. css 文件 中 的 样式 放 在 了 @media srceen and (max-width; 600px) {++ } HY 
大 括号 之 中 。 在 语句 上 面 的 语句 结构 中 ,可 以 看 出 Media Query 和 CSS 的 属性 集合 很 相 
似 , 主 要 区 别 有 以 下 几 点 。 

(1) Media Query 只 接受 单个 的 逻辑 表达 式 作 为 其 值 , 或 者 没有 值 ; 

(2) CSS 属性 用 于 声明 如 何 表现 页 面 上 的 信息 ; 而 Media Query 是 一 个 用 于 判断 输出 
设备 是 否 满足 某 种 条 件 的 表达 式 ; 

(3) Media Query 其 中 的 大 部 分 接受 min/max 前 级 ,用 来 表示 其 逻辑 关系 ,表示 应 用 于 
大 于 等 于 或 者 小 于 等 于 某 个 值 的 情况 ; 

(4) CSS 属性 要 求 必 须 有 属性 值 ,Media Query 可 以 没有 值 ,因为 其 表达 式 返 回 的 只 有 
真 或 假 两 种 。 

下 面 来 看 看 Media Queries 的 具体 使 用 方式 。 

1. 最 大 宽度 Max Width 


< link rel = "stylesheet" media = "screen and (max — width: 600px)" href = " small. css" type = 
"text/css" /> 


上 面 表示 的 是 : 当 屏 幕 小 于 或 等 于 600px 时 ,将 采用 small. css FÉ zÜ 3 i ye Web 
页 面 。 
2. 最 小 宽度 Min Width 


< link rel = "stylesheet" media = "screen and (min — width:900px)" href = "big. css" type = "text/ 
css" /> 


上 面 表示 的 是 : 当 屏 幕 大 于 或 等 于 900px 时 ,将 采用 big. css 样式 来 泻 染 Web 页 面 。 


3. 多 个 Media Queries 使 用 


< link rel = "stylesheet" media = "screen and (min — width:600px) and (max — width:900px)" href 
= "style. css" type = "text/css"/> 


Media Query 可 以 结合 多 个 媒体 查询 , 换 句 话说 ,一 个 Media Query 可 以 包含 0 到 多 个 
表达 式 ,表达 式 又 可 以 包含 0 到 多 个 关键 字 , 以 及 一 种 Media Type。 正 如 上 面 的 代码 表示 
的 是 当 屏 幕 在 600 一 900px 之 间 时 采用 style. css 样式 来 泻 染 Web 页 面 。 

4. 设备 屏幕 的 输出 宽度 Device Width 


< link rel = "stylesheet" media = "screen and (max — device — width: 480px)" 
href = "iphone. css" type = "text/css" /> 


上 面 的 代码 指 的 是 iphone. css 样式 适用 于 最 大 设备 宽度 为 480px, 例 如 iPhone 上 的 显 
示 , 这 里 的 max-device-width 所 指 的 是 设备 的 实际 分 辩 率 ,也 就 是 指 可 视 面 积分 辩 率 。 
5. iPhone4 


< link rel = "stylesheet" media = "only screen and ( - webkit ~ min - device - pixel - ratio: 2)" 
type = "text/css" href = "iphone4.css" /> 


上 面 的 样式 是 专门 针对 iPhone4 的 移动 设备 写 的 。 
6. iPad 


< link rel = "stylesheet" media = "all and (orientation:portrait)" 
href = "portrait. css" type = "text/css" /> 

< link rel = "stylesheet" media = "all and (orientation: landscape)" 
href = "landscape. css" type = "text/css" /> 


在 大 数 情况 下 ,移动 设备 iPad 上 的 Safari 和 在 iPhone 上 的 是 相同 的 ,只 是 iPad 声明 了 
不 同 的 方向 ,如 上 例 ,在 纵向 (portrait) 时 采用 portrait. css 来 泻 染 页 面 ; 在 横向 (landscape) 
时 采用 landscape. css 来 泻 染 页 面 。 

7. Android 


/ * 240px 的 宽度 * / 

< link rel = " stylesheet" media = " only screen and (max - device — width: 240px)" href = 
"android240. css" type = "text/css" /> 

/ * 360px 的 宽度 x*/ 

< link rel = "stylesheet" media = "only screen and (min - device - width:241px) and (max - device 
— width:360px)" href = "android360. css" type = "text/css" /> 

/ * 480px 的 宽度 x*/ 

< link rel = "stylesheet" media = "only screen and (min - device- width:361px) and (max - device 
— width:480px)" href = "android480.css" type = "text/css" /> 


可 以 使 用 Media Query 为 Android 手机 在 不 同 分 辩 率 提供 特定 样式 .这 样 就 可 以 解决 
屏幕 分 辩 率 的 不 同 给 Android 手机 的 页 面 带 来 的 重 构 问 题 。 
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8. not 关键 字 


< link rel = "stylesheet" media = "not print and (max — width: 1200px)" href = "print. css" type 
= "text/css" /> 


not 关键 字 是 用 来 排除 某 种 制定 的 媒体 类 型 , 换 句 话说 就 是 用 于 排除 符合 表达 式 的 
设备 。 
9. only 关键 字 


< link rel = " stylesheet" media = " only screen and (max - device - width: 240px)" href = 
"android240. css" type = "text/css" /> 


only 用 来 定 某 种 特定 的 媒体 类 型 ,可 以 用 来 排除 不 支持 媒体 查询 的 浏览 器 。 其 实 only 
很 多 时 候 是 用 来 对 那些 不 支持 Media Query 但 却 支持 Media Type 的 设备 隐藏 样式 表 的 。 

其 主要 有 : 支持 媒体 特性 (Media Queries) 的 设备 ,正常 调用 样式 ,此 时 就 当 only 不 存 
在 ; 对 于 不 支持 媒体 特性 (Media Queries) 但 又 支持 媒体 类 型 (Media Type) 的 设备 ,这 样 就 
会 不 读 样式 ,因为 其 先 读 only 而 不 是 screen; 另外 不 支持 Media Queries 的 浏览 器 ,不 论 是 
否 支持 only, 样 式 都 不 会 被 采用 。 

10. 其 他 

在 Media Query 中 如 果 没 有 明确 指定 Media Type, 那 么 其 默认 为 all, 如 : 


< link rel = "stylesheet" media = "(min— width: 701px) and (max — width: 900px)" href = "medium. 
css" type = "text/css"/> 


另外 还 有 使 用 逗号 (,) 用 来 表示 并 列 或 者 表示 或 ,如 ， 


< link rel = " stylesheet" type = "text/css" href = "style. css" media = " handheld and (max 一 
width:480px), screen and (min - width:960px)"/> 


上 面 代码 中 ,style. css 样式 被 用 在 宽度 小 于 或 等 于 480px 的 手持 设备 上 ,或 者 被 用 于 
屏幕 宽度 大 于 或 等 于 960px 的 设备 上 。 

关于 Media Query 的 使 用 这 一 节 就 介绍 到 此 ,最 后 总 体 归纳 一 下 其 功能 ， Media 
Queries 能 在 不 同 的 条 件 下 使 用 不 同 的 样式 ,使 页 面 达到 不 同 的 这 染 效果 。 


小 结 


在 本 章 中 ,主要 介绍 了 CSS3 在 HTML5 移动 Web 开发 中 的 功能 。 通 过 学 习 CSS3 的 
特性 ,可 以 在 移动 Web 开发 中 对 页 面 布 局 字体、 颜色 .背景 等 方面 实现 有 效 的 控制 。 


第 6 章 jQuery Mobile 


本 章 学 习 目 标 

° jQuery Mobile 

。 jQuery Mobile 基本 页 面 结 构 
。 jQuery Mobile 基本 元 素 


jQuery 一 直 以 来 都 是 非常 流行 的 客户 端 及 Web 应 用 程序 开发 中 使 用 的 JavaScript 类 
库 , 然 而 一 直 以 来 它 都 是 为 桌面 浏览 器 设计 的 ,没有 特别 为 移动 应 用 程序 设计 。 

jQuery Mobile 是 一 个 新 的 项 目 , 用 来 添补 在 移动 设备 应 用 上 的 缺憾 。 它 是 基本 
jQuery 框架 并 提供 了 一 定 范围 的 用 户 接口 和 特性 ,以 便于 开发 人 员 在 移动 应 用 上 使 用 。 使 
用 该 框架 可 以 节省 大 量 的 JavaScript 代码 开发 时 间 , 尽 管 目前 的 版 本 还 不 是 一 个 稳定 的 版 
本 ,但 它 的 应 用 效果 已 经 备 受 瞩目 。 

jQuery Mobile 为 开发 移动 应 用 程序 替代 了 非常 简单 的 用 户 接口 。 这 种 接口 的 配置 是 
标签 驱动 的 ,这 意味 着 可 以 在 HTML 中 建立 大 量 的 程序 接口 而 不 需要 写 一 行 JavaScript 
代码 。 

jQuery Mobile 提供 了 一 些 自 定义 的 事件 用 来 探测 移动 和 触摸 动作 ,例如 tap CS h). 
tap-and-hold( 点 击 并 按 住 ) ,swipe、orientation change, 

jQuery Mobile 基本 特性 如 下 。 

(1) 一 般 简 单 性 和 灵活 性 。 

该 框架 易于 使 用 。 主 要 使 用 标记 驱动 开发 页 面 ,无 须 或 仅 需 很 少 的 JavaScript; 使 用 高 
级 JavaScript 和 事件 ; 使 用 一 个 HTML 文件 和 多 个 嵌入 页 面 ; 将 应 用 程序 分 解 成 多 个 
页 面 。 

(2) 逐步 强化 和 全 面 兼容 。 

尽管 jQuery Mobile 利用 最 新 的 HTML5、CSS3 和 JavaScript ,但 并 非 所 有 移动 设备 都 
提供 这 样 的 支持 。jQuery Mobile 的 理念 是 同时 支持 高 端 和 低 端 设备 ,例如 那些 不 支持 
JavaScript 的 设备 ,尽量 提供 最 好 的 体验 。 

(3) 支持 触摸 屏 输 入 和 其 他 输入 方法 。 

jQuery Mobile 为 不 同 输入 方法 和 事件 提供 支持 : 触摸 屏 、 鼠 标 和 基于 光标 焦点 的 用 户 
输入 。 

(4) 可 访问 性 。 

jQuery Mobile 在 设计 时 考虑 了 访问 能 力 , 它 支持 Accessible Rich Internet Applications 
CWAI-ARIA) ,以 帮助 使 用 辅助 技术 的 残障 人 士 访问 Web 页 面 。 
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(5) 轻 量 级 和 模块 化 。 

该 框架 属于 轻 量 级 ,拥有 一 个 很 小 的 JavaScript E .CSS 以 及 一 些 图 标 。 

(6) 主题 。 

该 框架 还 提供 一 个 主题 系统 ,允许 定义 自己 的 应 用 程序 样式 ,可 以 轻松 地 创建 自己 的 
主题 。 

jQuery Mobile 框架 包括 构建 完整 移动 Web 应 用 程序 和 网 站 所 需 的 所 有 UI 组 件 , 如 页 
面 、 对 话 框 .工具 栏 不 同类 型 的 列表 视图 、 各 种 表单 元 素 和 按钮 等 。jQuery Mobile 构建 于 
jQuery 内 核 之 上 ,因此 可 以 访问 关键 设备 ,包括 HTML 和 XML 文档 对 象 模型 (DOM) 的 遍 
历 操作 ; 事件 处 理 ; 使 用 AJAX 服务 器 通信 ; 以 及 Web 页 面 的 动画 和 图 像 效 果 。 有 了 
jQuery Mobile, 就 可 以 轻而易举 地 编写 基础 Web 应 用 程序 。 由 于 jQuery Mobile 是 一 个 非 
常 全 面 的 基础 架构 ,提供 了 一 些 高 级 事件 和 API, 所 以 还 可 以 编写 高 级 移动 Web 应 用 程序 
和 网 站 。 

接 下 来 将 通过 实例 展示 jQuery Mobile 的 特性 及 好 处 ,可 以 看 到 这 个 新 框架 是 如 何在 
短 时 间 内 建立 起 一 个 高 质量 的 移动 应 用 程序 ,讲解 的 代码 最 好 使 用 的 移动 设备 平台 
iPhone 或 Android。 或 者 是 在 PC 上 使 用 Safari 浏览 器 调试 。 


6.1 浏览 器 支持 


移动 设备 浏览 器 经 历 了 漫长 的 发 展 ,但 并 非 所 有 移动 设备 都 支持 HTML5、CSS3 和 
JavaScript。 这 个 领域 是 jQuery Mobile 持续 增强 和 支持 全 面 兼容 发 挥 作用 的 地 方 。jQuery 
Mobile 同时 支持 高 端 和 低 端 设备 ,包括 那些 不 支持 JavaScript 的 设备 。 持 续 增 强 是 一 个 设 
计 理 念 ,包含 以 下 核心 原则 。 

(1) 所 有 浏览 器 都 应 该 能 够 访问 全 部 基础 内 容 。 

(2) 所 有 浏览 器 都 应 该 能 够 访问 全 部 基础 功能 。 

(3) 增强 的 布局 由 外 部 链接 的 CSS 提供 。 

(4) 增强 的 行为 由 外 部 链接 的 CSS 提供 。 

(5) 终端 用 户 浏 览 器 偏好 应 受到 重视 。 

所 有 基本 内 容 应 该 在 基础 设备 上 进行 泻 染 ,而 更 高 级 的 平台 和 浏览 器 将 使 用 额外 的 、 外 
部 链接 的 JavaScript 和 CSS 持续 增强 。 

jQuery Mobile 为 大 量 移动 设备 提供 支持 ,jQuery Mobile 将 设备 支持 根据 其 支持 级 别 
分 类 或 分 组 成 三 个 类 别 。 

AR: 设备 支持 一 个 充分 增强 的 用 户 体验 和 基于 Ajax 的 动画 页 面 过 渡 。jQuery 
Mobile 支持 超过 20 个 不 同 设 备 , 其 中 包括 : iOS 3.2 一 5. 0, Android 2.1 一 2. 3 与 3. 0、 
BlackBerry 6 和 7 与 Playbook, Skyfire4. 1, Opera Mobile; 还 支持 桌面 浏览 器 Chrome, 
Firefox IE 和 Opera. 

BR: 设备 支持 一 个 增强 体验 ,但 是 没有 Ajax 导航 特性 。 支 持 的 设备 包括 : 
BlackBerry 5. 0,Opera Mini 5. 0 一 6.5 和 Nokia Symbian, 

CH: 设备 支持 一 个 基本 的 、 非 增强 的 HTML 体验 。 支 持 的 设备 包括 : 上 一 代 智 能 手 
机 ,包括 BlackBerry 4. x. Windows Mobile 和 其 他 设备 。 


6.2 jQuery Mobile 基本 页 面 结 构 


一 个 典型 的 jQuery Mobile 页 面 有 三 部 分 : 页 眉 、 内 容 和 页 脚 部 分 。 页 眉 部 分 通常 放置 
页 面 标题 和 logo 等 信息 ,内 容 部 分 放置 特定 Web 应 用 程序 和 各 种 小 部 件 , 页 脚 部 分 很 适合 
导航 。 

要 利用 jQuery Mobile 高 级 功能 和 HTML 语法 ,jQuery Mobile HTML 文档 必须 定义 
HTML5 文档 类 型 。HTML 文档 其 余部 分 包括 二 head 之 和 二 body 二 两 部 分 ,其 中 ,一 head 二 包 
jQuery Mobile 引用 和 CSS 移动 主题 ,一 body 二 部 分 包含 jQuery Mobile 内 容 。 大 部 分 
jQuery Mobile Web 应 用 程序 都 要 遵循 下 面 的 基本 模板 。 


<! DOCTYPE html > 
<html> 
< head> 
< title> Page Title </title> 
< link rel = " stylesheet" href = " http://code. jquery. com/mobile/1. 3. 2/jquery. mobile — 
1.3.2. min. css"> 
< script src = "http: //code. jquery. com/ jquery- 1.8.3. min. js"></script > 
< script src = " http: //code. jquery. com/mobile/1. 3. 2/jquery. mobile - 1. 3. 2. min. js"> 
</script > 
</head> 
<body> 
< div data - role = "page"> 
< div data- role = "header"> < l> Page Title </hl > </div> 
< div data - role = "content"> 
< p> Page content goes here. </p> 
</div> 
< div data - role = "footer"> 
< h4 > Page Footer </h4 > 
</div > 
</div > 
</body> 
</html> 


要 使 用 jQuery Mobile ,首先 需要 在 开发 的 界面 中 包含 jQuery. mobile-1. 3. 2. min. css, 
jQuery-1. 8. 3. min. js 和 jQuery. mobile-1. 3. 2. min. js 这 三 个 文件 ,如 果 没 有 ,开发 人 员 也 
可 以 去 网 上 下 载 它 们 。 

在 模板 中 有 些 地 方 值得 注意 。 首 先是 DIV 元 素 的 使 用 ,既然 HTML5 在 移动 设备 中 如 
此 流行 ,为 什么 不 使 用 更 加 新 的 header、article、section 和 footer 元 素 呢 ? 这 是 因为 较 老 的 
智能 手机 浏览 器 无 法 明白 新 的 HTML5 元 素 。 在 某 些 情况 下 ,例如 , Windows Phone 上 老 
版 本 的 下 会 出 现 一 个 Bug 使 得 无 法 加 载 页 面 的 CSS。 而 DIV 元 素 却 被 广泛 支持 。 

此 时 已 经 可 以 保存 网 页 并 在 浏览 器 中 查看 了 ,这 些 代 码 同 样 可 以 在 桌面 浏览 器 中 正常 
工作 。 推 荐 使 用 Chrome 或 者 Opera Mobile Emulator 来 进行 本 地 测试 。 要 在 真实 环境 测 
试 ,就 需要 相应 的 移动 设备 了 。 基 本 模板 显示 效果 如 图 6.1 所 示 。 
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图 6.1 基本 模板 显示 效果 


可 以 看 到 页 面 中 的 内 容 都 是 包装 在 div 标签 中 并 在 标签 中 加 入 data-role 王 "page" 属 
性 。 这 样 jQuery Mobile 就 会 知道 哪些 内 容 需 要 处 理 。 
说 明 : data- 属 性 是 HTML5 新 推出 的 一 个 很 有 趣 的 特性 , 它 可 以 让 开发 人 员 添 加 任意 
属性 到 HTML 标签 中 ,只 要 添加 的 属性 名 有 “data-" 前 缀 。 
在 “page”div 中 ,还 可 以 包含 “header”content”footer” 的 div 元 素 , 这 些 元 素 都 是 可 选 
的 ,但 至 少 要 包含 一 个 “content”div, 各 元 素 的 作用 如 表 6. 1。 
表 6.1 各 元 素 的 作用 
<div data-role= "header"></div> 在 页 面 的 顶部 建立 导航 工具 栏 ,用 于 放置 标题 和 按钮 (典型 
的 至 少 要 放 一 个 “返回 "按钮 ,用 于 返回 前 一 页 )。 通 过 添加 
额外 的 属性 
data-position= "fixed" , 可 以 保证 头 部 始终 保持 在 屏幕 的 
顶部 
<div data-role= "content" ></div> 包含 一 些 主要 内 容 ,例如 文本 内 容 \ 图 像 、 按 钮 .列表 、 表 
单 等 
<div data-role= "footer"></div> 在 页 面 的 底部 建立 工具 栏 ,添加 一 些 功 能 按钮 
为 了 确保 它 始 终 保持 在 页 面 的 底部 ,可 以 给 其 加 上 data- 
position 二 "fixed" 属 性 


另外 ,关于 单个 页 面 、 多 个 页 面 和 页 面 链接 问题 ,这 里 也 要 说 一 下 。 单 个 HTML 文档 
可 以 有 一 个 或 多 个 jQuery Mobile 页 面 ,正如 下 面 的 代码 中 的 data-role 王 "page" 属 性 所 显 
示 的 。 如 果 有 多 个 页 面 ,必须 为 id 属性 指定 一 个 唯一 的 页 面 ID, 用 于 链接 外 部 页 面 。 加 载 
一 个 多 页 面 HTML 文档 时 , 仅 显 示 第 一 个 页 面 。 


<body> 
< div data - role = "page" id= "pagel"> 
< div data - role = "header"> 
< hl > HEADER </h1 > 
</div > 


< div data - role = "content"> 
<p> 
CONTENT AREA 
</p> 

</div> 

< div data - role = "footer"> 
< hl > FOOTER </hl > 

</div> 

</div> 


< div data - role = "page" id= "page2"> 
< div data - role = "header"> 
< hl > HEADER </hl > 
</div> 
< div data - role = "content"> 
<p> 
CONTENT AREA 2 
</p> 
</div> 
< div data - role = "footer"> 
< hl > FOOTER </hl > 
</div> 
</div> 
</body> 


6.3 jQuery Mobile 过 渡 


jQuery Mobile 包含 选择 页 面 打开 方式 的 CSS 效果 。jQuery Mobile 拥有 一 系列 关于 
如 何 从 一 页 过 渡 到 下 一 页 的 效果 。 如 需 实现 过 渡 效 果 , 浏 览 器 必须 支持 CSS3 3D 转换 。IE 
10 支持 3D 转换 (更 早 的 版 本 不 支持 ) ,但 Opera 仍然 不 支持 3D 转换 。 

过 渡 效 果 可 应 用 于 任意 链接 或 通过 使 用 data-transition 属性 进行 的 表单 提交 ,如 以 下 
示例 代码 所 示 。 


<a href = " # anylink" data- transition = "slide"> 滑 动 到 页 面 二 </a> 


6.2 展示 了 可 与 data-transition 属性 一 同 使 用 的 可 用 过 渡 。 
表 6.2 可 用 的 过 渡 


过 渡 描 述 过 渡 描 R 
fade 默认 。 淡 入 淡出 到 下 一 页 slidefade 从 右 向 左 滑动 并 淡 入 到 下 一 页 
flip 从 后 向 前 翻动 到 下 一 页 slideup 从 下 到 上 滑动 到 下 一 页 
flow 抛 出 当前 页 面 ,引入 下 一 页 slidedown ”从 上 到 下 滑动 到 下 一 页 
pop 像 弹出 窗口 那样 转 到 下 一 页 turn 转向 下 一 页 
slide 从 右 向 左 滑动 到 下 一 页 none 无 过 渡 效 果 
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提示 : 在 jQuery Mobile 中 , 淡 入 淡出 效果 在 所 有 链接 上 都 是 默认 的 (如 果 浏 览 器 支 
持 )。 以 上 所 有 效果 同时 支持 反 向 动作 ,例如 ,如 果 和 希望 页 面 从 左 向 右 滑动 ,而 不 是 从 右 向 
左 , 请 使 用 值 为 reverse 的 data-direction 属性 。 在 "后退" 按钮 上 是 默认 的 。 

下 面 的 代码 是 从 右 向 左 滑动 以 及 从 左 向 右 滑动 的 例子 。 


<! DOCTYPE html > 
<html> 
<head> 
< link rel = "stylesheet" 
href = "http: //code. jquery. com/mobile/1.3.2/jquery. mobile- 1.3. 2. min. css"> 
< script src = "http: //code. jquery. com/ jquery- 1. 8. 3. min. js"></script > 
< script src = "http: //code. jquery. com/mobile/1. 3. 2/jquery. mobile - 1. 3. 2. min. js"></script > 
</head> 
< body> 


< div data - role = "page" id= "pageone"> 
< div data - role = "header"> 
<hl > 欢迎 来 到 我 的 主页 </hl > 


</div> 


< div data - role = "content"> 

<p> 点 击 链接 来 查看 滑动 效果 (从 右 向 左 滑动 到 下 一 页 )</p> 

<a href = " # pagetwo" data- transition = "slide"> 滑 动 到 页 面 二 </a> 
</div> 


< div data - role = "footer"> 
< hi > 页 脚 文 本 </hl > 
</div> 

</div> 


< div data - role = "page" id= "pagetwo"> 
< div data - role = "header"> 
< hl > 欢迎 来 到 我 的 主页 </hl > 


</div> 


< div data - role = "content"> 
<p> 点 击 链接 来 查看 反 向 的 滑动 效果 (从 左 向 右 滑动 到 前 一 页 )</p> 
<a href = " # pageone" data- transition = "slide" data - direction = "reverse"> 
滑动 到 页 面 一 ( 反 向 ) 
</a> 
</div> 


< div data - role = "footer"> 
<hl > 页 脚 文 本 </hl > 
</div> 

</div> 


</body> 
</html> 


6.4 jQuery Mobile 按钮 


在 jQuery Mobile 中 的 按钮 可 以 通过 以 下 三 种 方法 创建 。 
(1) (EH <button> T; 

(2) EM <input> 68; 

(3) 使 用 data-role= "button" fJ <a> J 3 , 

HAF <button> WHA RUF 


< button > 按钮 </button > 


FKF <input> MH ,格式 如 下 。 


< input type = "button" value = "按钮 "> 


WARKA <a> WHK ,格式 如 下 。 


<a href = " # " data- role = "button"> 按 钮 </a> 


注意 : jQuery Mobile 中 的 按钮 会 自动 获得 样式 ,这 增强 了 它们 在 移动 设备 上 的 交互 性 
和 可 用 性 。 推 荐 使 用 data-role 二 "button" 的 二 a 记 元 素来 创建 页 面 之 间 的 链接 ,而 二 input 二 
或 一 button 过 元素 用 于 表单 提交 。 

导航 按钮 : 如 需 通过 按钮 来 链接 页 面 , 请 使 用 data-role 二 "button" 的 二 a 二 元 素 , 如 下 
面 的 代码 。 


<a href = " # pagetwo" data- role = "button"> 转 到 页 面 二 </a> 


行内 按钮 : 默认 情况 下 ,按钮 会 占据 屏幕 的 全 部 宽度 。 如 果 需 要 按钮 适应 其 内 容 , 或 者 
如 果 需 要 两 个 或 多 个 按钮 并 排 显示 ,请 添加 data-inline= "true" ,如 下 面 的 代码 。 


<a href = " # pagetwo" data — role = "button" data- inline = "true"> 转 到 页 面 二 </a> 


组 合 按钮 : jQuery Mobile 提供 了 对 按钮 进行 组 合 的 简单 方法 。 可 以 同时 使 用 两 个 属 
性 ,也 就 是 data-role 二 "controlgroup" 属 性 与 data-type =" horizontal | vertical" 一 同 使 用 ,以 
规定 水 平 或 垂直 地 组 合 按钮 ,如 下 面 的 代码 。 


< div data - role = "content"> 
< div data ~ role = "controlgroup" data - type = "horizontal"> 
<p> 水 平分 组 : </p> 
<a href = " # " data- role="button"> 按 钮 1 </a> 
<a href = " # " data- role = "button"> 按 钮 2 </a > 
<a href = " # " data- role = "button"> 按 钮 3 </a > 
</div><br> 


< div data - role = "controlgroup" data - type = "vertical"> 
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<p> 垂 直 分 组 (默认 ): </p> 
<a href = " # " data- role = "button"> 按 钮 1 </a> 
<a href = " # " data- role = "button"> 按 钮 2 </a> 
<a href = " # " data- role = "button"> 按 钮 3 </a> 
</div> 

</div> 


提示 : 默认 情况 下 ,组合 按钮 是 重 直 分 组 的 ,彼此 间 没 有 外 边 距 和 空白 。 并 且 只 有 第 一 
个 和 最 后 一 个 按钮 拥有 圆 角 ,在 组 合 后 就 创造 出 了 漂亮 的 外 观 。 

后 退 按钮 : 如 需 创 建 后 退 按钮 ,请 使 用 data-rel 二 "back" 属 性 (会 忽略 href 值 ) ,如 下 面 
的 代码 。 


<a href =" # " data- role = "button" data- rel = "back"> 返 回 </a> 


更 多 用 于 按钮 的 data- * 属性 ,如 表 6. 3 所 示 。 
表 6.3 按钮 的 datar * 属性 


属 性 值 描 述 
data-corners true | false 规定 按钮 是 否 有 圆 角 
data-mini true | false 规定 是 否 是 小 型 按钮 
data-shadow true | false 规定 按钮 是 否 有 阴影 


6.5 jQuery Mobile 按钮 图 标 


jQuery Mobile 提供 的 一 套图 标 可 令 按 钮 更 具 吸 引力 ,如 需 向 按钮 添加 图 标 , 请 使 用 
data-icon 属性 ,如 以 下 的 代码 。 
<a href = " # anylink" data- role = "button" data — icon = "search"> 搜 索 </a> 
提示 : s| 22 #£< button2> £ <input2> AA P #Ë J] data-icon 属性 ,下 面 列 出 了 jQuery 
Mobile 提供 的 一 些 可 用 图 标 , 如 表 6.4 所 示 。 
表 6.4 jQuery Mobile 提供 的 图 标 


属 性 值 描 述 图 标 
data-icon= "arrow-l" 左 箭头 9 
data-icon= "arrow-r" 右 箭头 ° 
data-icon= "delete" 删除 ° 
data-icon= "info" 信息 9 
data-icon= "home" 首页 o 
data-icon= "back" 返回 DO 
data-icon= "search" 搜索 Q 
data-icon= "grid" 网 格 ° 


定位 图 标 : 能 够 规定 图 标 被 放置 的 位 置 一 一 上 、 右 、 下 或 左 。 请 使 用 data-iconpos 属性 
来 规定 位 置 , 默 认 所 有 按钮 中 的 图 标 靠 左 放置 ,如 下 面 的 代码 。 


<a href = " # link" data- role = "button" data- icon = "search" data- iconpos = "top"> 上 </a> 

<a href = " # link" data - role = "button" data — icon = "search" data- iconpos = "right"> 右 </a> 
<a href =" # link" data - role = "button" data — icon = "search" data - iconpos = "bottom"> 下 </a> 
<a href = " # link" data- role = "button" data — icon = "search" data— iconpos = "left"> 左 </a> 


只 显示 图 标 : 如 果 只 需 显示 图 标 , 请 将 data-iconpos 设置 为 notext, 如 下 面 的 代码 。 


<a href = " # link" data- role = "button" data — icon = "search" data — iconpos = "notext"> 搜 索 </a> 


6.6 jQuery Mobile 工具 栏 


工具 栏 元 素 常 被 放置 于 页 眉 和 页 脚 中 ,以 实现 “已 访问 ?的 导航 。 

1. 标题 栏 

页 眉 通常 会 包含 页 眉 标 题 或 一 到 两 个 按钮 (通常 是 首页 .选项 或 “搜索 ”按钮 )。 可 以 在 
页 眉 中 向 左 侧 或 /以 及 右 侧 添加 按钮 。 如 下 面 的 代码 ,将 向 页 眉 标 题 文本 的 左 侧 添加 一 个 按 
钮 ,并 向 右 侧 添加 一 个 按钮 ,显示 效果 如 图 6. 2 所 示 。 


< div data - role = "header"> 
<a href = " # " data- role = "button"> 首 页 </a> 


< h1 > 欢迎 来 到 我 的 主页 </hl > 
<a href = " # " data - role = "button"> 搜 索 </a> 
</div> 
a 首页 欢迎 访问 我 的 主页 Q 搜索 


图 6.2 标题 
下 面 的 代码 将 向 页 眉 标 题 的 左 侧 添加 一 个 按钮 。 


< div data - role = "header"> 
<a href = " # " data - role = "button">Ë </a> 
<h1 > 欢迎 来 到 我 的 主页 </hl > 


</div> 


不 过 ,如 果 在 二 hl 过 元素 之 后 放置 按钮 链接 ,那么 它 不 会 显示 在 文本 右 侧 。 如 需 向 页 
眉 标 题 的 右 侧 添加 按钮 ,请 规定 类 名 为 "ui-btn-right" ,如 下 面 的 代码 。 
< div data - role = "header"> 
< hl > 欢迎 来 到 我 的 主页 </hl > 


<a href = " # " data- role = "button" class = "ui- btn- right"> 搜 索 </a> 
</div> 


提示 : 页 眉 可 包含 一 个 或 两 个 按钮 ,然而 页 脚 没 有 限制 。 
2. 页 脚 栏 
与 页 眉 相 比 ,页 脚 更 具 伸 缩 性 ,它们 更 实用 且 多 变 , 所 以 能 够 包含 所 需 数量 的 按钮 ,如 下 
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面 的 代码 。 


< div data - role = "footer"> 
<a href = " # " data- role = "button"> 转 播 到 新 浪 微 博 </a> 
<a href = " # " data- role = "button"> 转 播 到 腾讯 微 博 </a> 
<a href = " # " data- role = "button"> 转 播 到 00 空间 </a> 
</div> 


注释 : 页 脚 与 页 眉 的 样式 不 同 ( 它 会 减 去 一 些 内 边 距 和 空白 ,并 且 按 钮 不 会 居中 )。 如 
果 要 修正 该 问题 ,请 在 页 脚 设置 类 名 为 "ui-btn", 如 下 面 的 代码 。 


< div data - role = "footer" class = "ui— btn"> 


可 以 选择 在 页 脚 中 水 平 还 是 垂直 地 组 合 按钮 ,如 下 面 的 代码 ,显示 效果 如 图 6.3 所 示 。 


< div data - role = "footer" class = "ui - btn"> 
< div data - role = "controlgroup" data - type = "horizontal"> 
<a href = " # " data- role = "button" data- icon = "plus"> 转 播 到 新 浪 微 博 </a> 
<a href = " # " data- role = "button" data- icon = "plus"> 转 播 到 腾讯 微 博 </a> 
<a href = " # " data- role = "button" data- icon = "plus"> 转 播 到 00 空间 </a> 
</div> 
</div> 


十 转播 到 新 浪 微 博 + 转 揪 到 属 讯 微 博 + 转 揪 和 到 QQ 空 司 


图 6.3 页 脚 中 的 按钮 


3. 定位 页 眉 和 页 脚 

放置 页 眉 和 页 脚 的 方式 有 以 下 三 种 。 

(1) inline 一 一 默认 。 页 眉 和 页 脚 与 页 面 内 容 位 于 行内 。 

(2) fixed 一 一 页 面 和 页 脚 会 留 在 页 面 顶 部 和 底部 。 

(3) fullscreen 一 一 与 fixed 类 似 , 页 面 和 页 脚 会 留 在 页 面 顶 部 和 底部 。 
请 使 用 data-position 属性 来 定位 页 眉 和 页 脚 。 

(1) inline 定位 (默认 ), 如 下 面 的 代码 。 


< div data - role = "header" data - position = "inline"></div> 
< div data - role = "footer" data - position = "inline"></div> 


(2) fixed 定位 ,如 下 面 的 代码 。 


< div data - role = "header" data - position = "fixed"></div> 
< div data - role = "footer" data - position = "fixed"></div > 


(3) fullscreen 定位 : 如 果 需 要 启用 全 面 定 位 ,请 使 用 data-position= "fixed" ,并 向 该 元 
素 添 加 data-fullscreen 属性 ,如 下 面 的 代码 。 


< div data - role = "header" data — position = "fixed" data - fullscreen = "true"></div > 
< div data - role = "footer" data — position = "fixed" data - fullscreen = "true"></div > 


提示 : fullscreen 对 于 照片 .图 像 和 视频 非常 理想 ,对 于 fixed 和 fullscreen 定位 ,触摸 屏 
幕 将 隐藏 和 显示 页 眉 及 页 脚 。 


6.7 jQuery Mobile 导航 栏 


导航 栏 由 一 组 水 平 排列 的 链接 构成 ,通常 位 于 页 眉 或 页 脚 内 部 。 默 认 地 ,导航 栏 中 的 链 
接 会 自动 转换 为 按钮 (无 须 data-role= "button")。 请 使 用 data-role 二 "navbar" 属 性 来 定义 
导航 栏 , 如 下 面 的 代码 ,显示 效果 如 图 6.4 所 示 。 


< div data - role = "header"> 
< div data - role = "navbar"> 
<ul> 
<li><a href ="#anylink"> 首 页 </a></1i> 
<li><a href = " # anylink"> M M —</a></li > 
<li><a href ="#anylink"> 搜 索 </a></1i> 
</ul> 
</div > 
</div > 


首页 页 面 二 搜索 
图 6.4 导航 栏 


提示 : 按钮 的 宽度 默认 与 其 内 容 一 致 。 使 用 无 序列 表 来 均等 地 划分 按钮 : 一 个 按钮 占 
据 100% 的 宽度 ,两 个 按钮 各 分 享 50% 的 宽度 ,三 个 按钮 33. 3% ,以 此 类 推 。 不 过 ,如 果 在 
导航 栏 中 规定 了 5 个 以 上 的 按钮 ,那么 它 会 弯 折 为 多 行 。 

活动 按钮 : 当 导航 栏 中 的 链接 被 单 击 时 ,会 获得 选取 外 观 ( 按 下 ) 。 

如 需 在 不 按 链 接 时 实现 此 外 观 , 请 使 用 class =" ui-btn-active" ,如 下 面 的 代码 ,显示 效 
果 如 图 6.5 所 示 。 


<li><a href = " # anylink" class = "ui- btn-active"> 首 页 </a></li> 


图 6.5 活动 按钮 


对 于 多 个 页 面 , 可 以 为 每 个 按钮 设置 “被 选 ”外 观 ,以 表示 用 户 正在 浏览 该 页 面 。 如 果 要 
这 么 做 ,请 向 链接 添加 ui-state-persist 类 ,以 及 ui-btn-active 类 ,如 下 面 的 代码 。 
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<li><a href ="#anylink" class = "ui - btn- active ui- state- persist"> 首 页 </a></1i> 


6.8 jQuery Mobile R| jr ë 


HJ JJ Æ (Collapsibles) ft VF KAKER 28 A È , JT ff ië a y f LAB r H. mas OE a r 
BARH, Hi B] 8: 4° $ 68 2 Ë data-role 王 "collapsible" 属 性 。 在 容器 (div) 中 ,添加 一 个 标 
题 元 素 (hl 一 h6) ,其 后 是 需要 扩展 的 任意 HTML 标记 ,如 下 面 的 代码 ,显示 效果 如 图 6. 6 
所 示 。 


< div data - role = "collapsible"> 
<hl > 点 击 我 - RAHE! > 
<p> 我 是 可 折合 的 内 容 .</p> 


</div> 


O 点击 我 -我 可 以 折 得 ! 
6.6 KARETI HTE N ER 


默认 地 ,该 内 容 是 关闭 的 。 如 需 在 页 面 加 载 时 扩展 内 容 , 请 使 用 这 个 属性 data- 
collapsed=" false" ,如 下 面 的 代码 ,显示 效果 如 图 6.7 所 示 。 


< div data - role = "collapsible" data - collapsed = "false"> 
<hl > 点 击 我 - 我 可 以 折 春 !</hl > 
<p> 现 在 我 默认 是 展开 的 。</p> 


</div> 


O 点 击 我 -我 可 以 折 到 ! 
我 是 可 折 查 的 内 容 。 
图 6.7 显示 可 折 全 内容 块 
BREDTE.: 可 折 释 块 是 可 以 嵌 套 的 ,如 下 面 的 代码 ,显示 效果 如 图 6.8 所 示 。 


< div data - role = "collapsible"> 
<hl > 点 击 我 - RIANA! > 
<p> 我 是 被 展开 的 内 容 。</p> 
< div data - role = "collapsible"> 
<hl > 点 击 我 - REREH rak ki</h1 > 
<p> 我 是 嵌 套 的 可 折 倒 块 中 被 展开 的 内 容 。</p> 
</div> 
</div> 


提示 : 可 折合 内 容 块 可 以 被 谋 套 任意 次 数 。 


O mtf- Wapa E! 
我 是 可 折 本 的 内 容 。 


O 点 击 我 -我 是 谎 喜 的 可 折 枉 块 ! 


图 6.8 蔡 套 的 可 折 笃 内 容 块 


可 折叠 集合 : 可 折 释 集合 指 的 是 被 组 合 在 一 起 的 可 折 释 块 。 当 新 块 被 打开 时 ,所 有 其 
他 块 会 关闭 。 

首先 创建 若干 内 容 块 , 然 后 通过 data-role 二 "collapsible-set" 用 新 容器 包装 这 个 可 折 番 
块 ,如 下 面 的 代码 ,显示 效果 如 图 6.9 所 示 。 


< div data - role = "content"> 
< div data - role = "collapsible - set"> 

< div data - role = "collapsible"> 
< h3 > 点 击 我 - RTI DLL R </h3 > 
<p> 我 是 可 折 谷 的 内 容 .</p> 

</div> 

< div data - role= "collapsible"> 
<h3 > 点 击 我 - RI UHE! > 
<p> 我 是 可 折 春 的 内 容 .</p> 

</div> 

< div data - role = "collapsible"> 
<h3 > 点 击 我 - &u[DLIrki</h3 > 
<p> 我 是 可 折合 的 内 容 .</p> 

</div> 

< div data - role = "collapsible"> 
< h3 > 点 击 我 - 我 可 以 折 和 看 !</h3 > 
< 了 > 我 是 可 折 丢 的 内 容 .</p> 

</div> 

</div> 
</div> 


O 点 击 我 -我 可 以 折 秋 ! 
O 点 击 我 -我 可 以 折 笃 ! 
O 点 击 我 -我 可 以 折 委 ! 
O 点 击 我 -我 可 以 折 权 ! 


图 6.9 THARE 
6.9 jQuery Mobile 网 格 
jQuery Mobile 提供 了 一 套 基 于 CSS 的 列 布局 方案 。 不 过 :一般 不 推荐 在 移动 设备 上 


使 用 列 布局 ,这 是 由 于 移动 设备 的 屏幕 宽度 所 限 。 但 是 有 时 需要 定位 更 小 的 元 素 ,例如 按钮 
或 导航 栏 , 就 像 在 表格 中 那样 并 排 。 这 时 , 列 布局 就 恰如其分 。 网 格 中 的 列 是 等 宽 的 (总 宽 
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是 100%%) ,无 边框 背景 、 外 边 距 或 内 边 距 。 可 使 用 的 布局 网 格 有 4 种 , 见 表 6.5. 
表 6.5 4 种 布局 网 格 


网 格 类 列 列 宽 E 对 应 
ui-grid-a 2 50% / 50% ui-block-alb 
ui-grid-b 3 33% / 33% / 33% ui-block-a| b| c 
ui-grid-c 4 25% / 25% / 25% / 25% ui-block-a|b|c| d 
ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-block-a|b|c|d| e 


提示 : 在 列 容器 中 ,根据 不 同 的 列 数 , 子 元 素 可 设置 类 uirblock-alb|lcldle。 这 些 列 将 
依次 并 排 浮动 。 例 如 对 于 ui-grid-a 类 (两 列 布局 ) ,必须 规定 两 个 子 元素 ui-block-a 和 
ui-block-b; 对 于 ui-grid-b 类 (三 列 布局 ), 请 添加 三 个 子 元 素 ui-block-a、 ui-block-b 和 
ui-block-c。 


定制 网 格 : 可 以 通过 使 用 CSS 来 定制 列 块 ,如 下 面 的 代码 ,显示 效果 如 图 6. 10 所 示 。 


<! DOCTYPE html > 

<html> 

<head> 

< link rel = "stylesheet" href = "http://code. jquery. com/mobile/1. 3. 2/jquery. mobile - 1. 3. 2. 
min. css"> 

< script src = "http: //code. jquery. com/ jquery- 1. 8. 3. min. js"></script > 
< script src = "http: //code. jquery. com/mobile/1.3.2/jquery. mobile - 1.3. 2. min. js"></script > 
<style> 

. ui — block - a, 

, ü; — block — b, 

. ui — block -c 

{ 

background - color: lightgray; 

border: 1px solid black; 

height: 100px; 

font ~ weight: bold; 

text ~ align: center; 

padding: 30px; 

) 

</style> 

</head> 

<body> 


< div data - role = "page" id= "pageone"> 
< div data - role = "header"> 
<hl > 自 定 义 的 列 </hl > 


</div> 


< div data- role = "content"> 
<p> 三 列 样式 布局 : </p> 
<div class = "ui - grid - b"> 
< div class = "ui — block - a">< span> 第 一 个 列 </span></div> 


< div class = "ui — block - b">< span> 第 二 个 列 </span></div> 
"ui — block - c">< span> 第 三 个 列 </span></div> 


< div class 
</div> 
</div> 
</div> 


</body> 
</html> 


EJ: 


第 一 个 列 第 二 个 列 第 三 个 列 


图 6.10 定制 列 块 
当然 ,也 可 以 通过 使 用 行内 样式 来 定制 块 ,代码 如 下 。 


< div class = "ui - block - a" style = "border: lpx solid black;"> 
< span> Text..</span> 
</div> 


多 行 : 在 列 中 包含 多 个 行 也 是 可 以 的 ,如 下 面 的 代码 ,显示 效果 如 图 6.11 所 示 。 


<! DOCTYPE html > 

<html> 

< head> 

< link rel = "stylesheet" href = "http://code. jquery. com/mobile/1.3.2/jquery. mobile - 1. 3. 2. 
min. css"> 

< script src = "http: //code. jquery. com/ jquery - 1. 8. 3. min. js"></script > 

< script src = "http://code. jquery. com/mobile/1.3.2/jquery. mobile - 1.3.2. min. js"></script > 
</head> 

< body> 


< div data - role = "page" id= "pageone"> 
< div data - role = "header"> 
< hl > 多 列 </hl > 
</div> 


< div data - role = "content"> 
<p> 三 列 布局 : </p> 
<div clas ui- grid- b"> 
< div class = "ui — block — a" style = "border: 1px solid black; ">< span > Some Text </span> 
</div> 
< div class = "ui — block — b" style = "border: 1px solid black; ">< span> Some Text </span> 
</div> 
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< div class = "ui — block — c" 
</div> 
</div> 


<p> 多 行 的 三 列 布局 : </p> 
< div class = "ui — grid- b"> 


ui- block- a" 


<div class = 
</div> 

< div class = "ui - block - b" 
</div> 

< div class = "ui - block - c" 
</div> 

< div class = "ui - block - a" 
</div> 

< div class = "ui — block - b" 
</div> 

< div class = "ui —- block - a" 
</div> 

</div> 
</div> 

</div> 


</body> 
</htm1 > 


style = "border: 


style = "border: 
style = "border: 
style = "border: 
style = "border: 
style = "border: 


style = "border: 


1px solid black; ">< span > Some Text </span> 


1px solid black; ">< span > Some Text </span > 
1px solid black; ">< span > Some Text </span> 
1px solid black;">< span > Some Text </span > 
1px solid black; ">< span > Some Text </span> 
1px solid black;">< span > Some Text </span > 


1px solid black;">< span> Some Text </span> 


三 列 布局 ， 
Bome Text jome Text [Some Text 
多 行 的 三 列 布局 ， 
ome Text Pome Text [Some Text 
ome Text jome Text 
ome Text 


图 6.11 列 中 包含 多 行 


6.10 jQuery Mobile 列表 


jQuery Mobile 中 的 列表 视图 是 标准 的 HTML 列表 : 有 序列 表 ( 过 ol 二 ) 和 无 序列 表 
(<u>). WEEK. I] < ol së ul> Jú 8 Bš Ill data-role 二 "listview"。 如 需 使 这 
些 项 目 可 单 击 , 请 在 每 个 列表 项 (一 li> ) 中 规定 链接 ,如 下 面 的 代码 ,显示 效果 如 图 6. 12 


所 示 。 


< div data - role = "page" id= "pageone"> 


< div data - role = "content"> 
<h2 > 有 序列 表 : </h2 > 


< o1 data - role = "listview"> 


<li><a href =" 井 "> 列表 项 </a></1i> 
<1i><ahref=" 井 "> 列表 项 </a></1i> 
<li><a href =" 井 "> 列表 项 </a></1i> 

</ol> 

< h2 > 无 序列 表 : </h2 > 

<ul data - role = "listview"> 
<li><a href ="#"> 列 表 项 </a></1i> 
<li><a href ="#"> 列 表 项 </a></1i> 
<li><a href = "#"> 列 表 项 </a></1i> 

</ul> 

</div> 
</div> 


有 序列 表 : 
1 列表 项 

2 列表 项 

3. 列表 项 

无 序列 表 : 
列表 项 
列表 项 
列表 项 


6.12 列表 


© 


° 


如 需 为 列表 添加 圆 角 和 外 边 距 ,请 使 用 data-inset= "true" 属 性 ,如 下 代码 。 


<ul data - role = "listview" data- inset = "true"> 
<li><a href = " # "> 列表 项 </a></1i> 
<li><a href = " # "> 列表 项 </a></1i> 
<li><a href = " # "> 列表 项 </a></1i> 

</ul > 


提示 : 默认 地 ,列表 中 的 列表 项 会 自动 转换 为 按钮 (无 须 data-role 一 "button") 。 
列表 分 隔 符 : 列表 分 隔 符 (List Dividers) 用 于 把 项 目 组 织 和 组 合 为 分 类 / 节 。 如 需 规定 
列表 分 隔 符 ,请 向 二 li 二 元 素 添 加 data-role 二 "list-divider" 属 性 ,如 下 面 的 代码 ,显示 效果 如 


图 6.13 所 示 。 


< div data - role = "content"> 
< h2 > 列表 分 隔 符 </h2 > 
<ul data - role = "listview"> 
<li data- role = "list - divider"> 欧 洲 </1i> 
<li><a href ="#"> 德 国 </a></1i> 
<li><a href =" 井 "> 英国 </a></1i> 
<li data- role = "list - divider"> 亚 洲 </1i> 
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<li><a href =" # ">þ [</a ></li> 
<li><a href = " # "> </a ></li> 
<li data- role = "list - divider"> 非 洲 </1i> 
<li><a href =" # ">R K</a></1i> 
<li><a href =" 井 "> 南非 </a></1i> 
</ul> 
</div> 


列表 分 隔 符 

欧洲 

德国 e 
英国 © 
PM 

中 国 e 
印度 © 
非洲 

埃及 © 
南非 e 


6.13 列表 分 隔 符 


如 果 列 表 是 字母 顺序 的 (例如 通讯 录 ),jQuery Mobile 会 自动 添加 恰当 的 分 隔 符 , 在 
< 一 ol 或 二 ul 二 元 素 上 设置 data-autodividers 二 "true" 属 性 ,如 下 面 的 代码 ,显示 效果 如 
图 6.14 所 示 。 


< div data - role = "page" id= "pageone"> 

< div data - role = "content"> 

< h2 > 我 的 通讯 录 </h2 > 

<ul data - role = "listview" data - autodividers = "true" data- inset = "true"> 
<li><a href =" # "> hdele</a></1i> 
<li><a href =" # "> Agnes </a></1i> 
<li><a href = " # "> Albert </a></li> 
<li><a href = " # "> Billy </a></li> 
<li><a href = " # "> Bob</a></1i> 
<li><a href =" # "> Calvin</a></1i> 
<li><a href = " # "> Cameron </a ></li> 
<li><a href = " # "> Chloe</a></1i> 
<li><a href = " # "> Christina </a></li> 
<li><a href = " # "> Diana </a ></li> 
<li><a href = " # "> Gabriel </a></li> 
<li><a href = " # "> Glen </a></li> 
<li><a href =" # "> Ralph</a></li> 
<li><a href =" # "> Valarie</a></li> 

</ul> 

</div> 
</div> 


Adele o 
Agnes ° 
Albert o 
Bity o 
Bob o 
Calvin ° 
Cameron ° 
Chloe © 
Christina © 
Diana ° 
Gabriel ° 
Glen o 
Ralph ° 
Valarie ° 


图 6.14 字母 顺序 的 列表 


提示 : data-autodividers= "true" 属性 通过 对 列表 项 文本 的 首 字母 进行 大 写 来 创建 分 
隔 符 。 

搜索 过 滤器 : 如 需 在 列表 中 添加 搜索 框 , 请 使 用 datarfilter= "true" 属 性 ,如 下 面 的 代 
码 ,显示 效果 如 图 6. 15 所 示 。 


< div data - role = "page" id= "pageone"> 
< div data - role = "content"> 


< h2 > 我 的 通讯 录 </h2 > 
< ul data- role = " listview" data - autodividers = "true" data ~ inset = "true" data - filter = 
"true"> 


<li><a href ="#">Adele</a></li> 
<li><a href =" # "> Agnes </a></li> 
<li><a href =" # "> Albert </a></li> 
<li><a href = " # "> Billy</a></1i> 
<li><a href = " # "> Bob</a></li > 
<li><a href = " # "> Calvin</a></1i> 
<li><a href = " # "> Cameron </a></1i> 
<li><a href = " # "> Chloe</a></1i> 
<li><a href = " # "> Christina </a></1i> 
<li><a href = " # "> Diana </a></li> 
<li><a href = " # "> Gabriel </a></1i> 
<li><a href = " # "> Glen</a></1i> 
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<li><a href =" # ">Ralph</a></1i> 
<li><a href =" #">Valarie</a></li> 


</ul> 
</div> 
</div> 
我 的 通讯 录 

Adae o 
Agnas o 
Albor o 
ey ° 
kand o 
Canta o 
Cameron o 
Cmos o 
Christina o 
Diana o 
Gacrie ° 
Gn ° 
naiph ° 
vaare o 


图 6.15 列表 中 添加 搜索 框 


默认 地 ,搜索 框 中 的 文本 是 "Filter items..."。 如 需 修改 默认 文本 ,请 使 用 data-filter- 
placeholder 属性 ,如 以 下 代码 所 示 。 


<ul data- role = "listview" data- filter = "true" data- filter- placeholder = "搜索 姓名 "> 


列表 缩 略图 : 为 了 实现 缩 略 图 ,请 在 链接 中 添加 过 img> 元 素 , 对 于 大 于 16X16px 的 图 
像 ,jQuery Mobile 将 自动 把 图 像 调整 至 80 X 80px。 如 下 面 的 代码 ,显示 效果 如 图 6.16 
所 示 。 


< div data - role= "content"> 
< h2 > 包含 缩 略 图 的 列表 : </h2 > 
<ul data- role = "listview" data- inset = "true"> 
<li> 
<a href = " # ">< img src = "/i/chrome. png"></a > 
</li> 


= 
<a href = " # ">< img src = "/i/firefox. png"></a > 
</li> 
</ul> 
</div> 


包含 缩 略图 的 列表 : 

e ° 

@ ° 
6.16 列表 缩 略 图 


再 看 一 个 例子 ,使 用 标准 HTML 来 填充 带 有 信息 的 列表 ,如 下 面 的 代码 ,显示 效果 如 
图 6.17 所 示 。 


< div data - role = "page" id= "pageone"> 
< div data - role = "content"> 
< h2 > 包含 缩 略图 和 文本 的 列表 : </h2 > 
<ul data - role = "listview" data- inset = "true"> 
<li> 
<a href = " # "> 
< img src = "/i/chrome. png"> 
< h2 > Google Chrome </h2 > 
< p> Google Chrome is a free, open - source web browser. Released in 2008.</p> 
</a> 
</li> 
<li> 
<a href = " # "> 
< img src = "/i/firefox.png"> 


<h2 > Mozilla Firefox </h2 > 
<p>Firefox is a web browser from Mozilla. Released in 2004.</p> 
</a> 
</li> 
</ul> 
</div> 
</div> 
包含 缩 略图 和 文本 的 列表 : 
e. Google Chrome © 
Google Chrome is a tree, open-source web browser Released in 2008 
Mozilla Firefox e 
Firefoxis a web browser rom Mozila. Released in 2004 


图 6.17 带 有 信息 的 列表 
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列表 图 标 : 如 需 向 列表 中 添加 16 X16px H EER. i E < img > 3 # "J #š JII class = 
"ui-li-icon" 属 性 ,如 下 面 的 代码 ,显示 效果 如 图 6.18 所 示 。 


< div data- role = "page" id= "pageone"> 
< div data - role = "content"> 
< h2 > 带 有 图 标的 列表 : </h2 > 
<ul data- role = "listview" data - inset = "true"> 
<li><a href = " # ">< img src = "/i/us. png" alt = "USA" class = "ui — 1i- icon"> USA </a > 
</li> 
<li><a href = " # ">< img src = "/i/gb. png" alt = "Great Britain" class = "ui— 1i- icon"> 
Great Britain </a></li> 
<li><a href = " # ">< img src = "/i/finland. png" alt = "Finland" class = "ui — li - icon"> 
Finland</a></li> 
<li><a href = " # ">< img src = "/i/germany. png" alt = "Germany" class = "ui — 1i- icon"> 
Germany </a ></li> 
<li><a href = " # ">< img src = "/i/france. png" alt = "France" class = "ui — li - icon"> 
France</a></1i> 
</ul> 
</div> 
</div> 


带 有 图 标的 列表 : 
USA 
Great Britain 


= 
sa 
+ Finland 
- 


Germany 


° O O O O 


EI France 


图 6.18 带 图 标的 列表 


拆 分 按钮 : 如 需 创 建 带 有 垂直 分 隔 栏 的 拆 分 列表 ,请 在 二 li 一 元 素 内 放置 两 个 链接 。 
jQuery Mobile 会 自动 为 第 二 个 链接 添加 蓝 色 箭头 图 标的 样式 ,链接 中 的 文本 (如 有 ) 将 
在 用 户 划 过 该 图 标 时 显示 ,如 下 面 的 代码 ,显示 效果 如 图 6. 19 所 示 。 


< div data - role = "page" id= "pageone"> 
< div data - role = "content"> 
< h2 > 拆 分 按钮 </h2 > 
<ul data- role = "listview" data- inset = "true"> 
<li> 

<a href = " # "> 
< img src = "/i/chrome. png"> 
< h2 > Google Chrome </h2 > 
< p> Google Chrome is a free, open — source web browser. Released in 2008.</p> 
</a> 


<a href = " # "> Some Text </a > 

</li> 

> 
<a href = " # "> 
< img src = "/i/firefox. png"> 
< h2 > Mozilla Firefox </h2 > 
<p> Firefox is a web browser from Mozilla. Released in 2004.</p> 
</a> 
<a href ="#"> Some Text </a> 

</li> 

</ul> 
</div> 
</div> 


拆 分 按钮 


Google Chrome @ 
Google Chrome is a tree, open-source web browser. Released in 2008 

Mozilla Firefox © 
Firefoxis a web browser rom Mozilla. Released in 2004 


图 6.19 带 有 垂直 分 隔 栏 的 拆 分 列表 
通过 添加 页 面 和 对 话 框 , 可 使 链接 的 功能 更 强大 ,如 以 下 代码 所 示 o 


<ul data- role = "listview"> 
<li> 
<a href = " # ">< img src = "chrome. png"></a > 
<a href = " # download" data - rel = "dialog"> 下 载 浏览 器 </a> 
</li> 
</ul> 


计数 泡沫 : 计数 泡沫 用 于 显示 与 列表 项 相关 的 数目 ,例如 邮箱 中 的 消息 。 如 需 添加 计 
数 泡沫 ,请 使 用 行内 元 素 , 比 如 二 span ,设置 class 二 "ui-li-count" 属 性 并 添加 数字 ,如 下 面 


的 代码 ,显示 效果 如 图 6. 20 所 示 。 


< div data - role = "page" id= "pageone"> 
< div data - role = "content"> 
< h2 > 我 的 邮箱 </h2 > 
<ul data- role = "listview" data- inset = "true"> 


<li><a href ="#"> 收 件 箱 < span class = "ui - li - count"> 25 </span ></a></li > 
<li><a href = " # ">F #i< span class = "ui - li - count"> 432 </span></a></1i> 
<li><a href = " # ">J #8< span class = "ui - li - count"> 7 </span></a></li> 


</ul> 
</div> 
</div> 
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我 的 邮箱 

收 件 箱 50 
发 件 箱 s. o 
垃 级 箱 53o 


图 6.20 带 有 计数 泡沫 列表 
6.11 jQuery Mobile 表单 


jQuery Mobile 使 用 CSS 来 设置 HTML 表单 元 素 的 样式 ,以 使 其 更 有 吸引 力 、 更 易 用 。 
在 jQuery Mobile 中 ,可 以 使 用 以 下 表单 控件 : 文本 框 、 搜 索 框 、. 单 选 框 ` 复 选 框 . 选 择 菜单 、 
滑动 条 和 翻转 切换 开关 。 

当 使 用 jQuery Mobile 表单 时 ,应 该 了 解 以 下 信息 。 

(1) 二 form 过 元 素 必须 设置 method 和 action 属性 。 

(2) 每 个 表单 元 素 必须 设置 唯一 的 id 属性 。 该 id 在 站 点 的 页 面 中 必须 是 唯一 的 。 这 
是 因为 jQuery Mobile 的 单 页 面 导航 模型 允许 许多 不 同 的 “页 面 ”同时 呈现 。 

(3) 每 个 表单 元 素 必须 有 一 个 标记 (label) 。 请 设置 label 的 for 属性 来 匹配 元 素 的 id, 

例如 下 面 的 代码 ,显示 效果 如 图 6. 21 所 示 。 


< div data - role = "page"> 
< div data - role = "content"> 
< form method = "post" action = "demoform. asp"> 
< label for = "fname"> 姓 名 : </label > 
< input type = "text" name = "fname" id= "fname"> 
< input type = "submit" data - inline = "true" value = "提交 "> 
</form> 
</div> 
</div> 


姓名 ， 


提交 
6.21 表单 


如 需 隐 藏 label, 请 使 用 类 ui-hidden-accessible。 这 很 常用 , 当 需 要 元 素 的 placeholder 
属性 充当 label 时 ,代码 如 下 。 


< form method = "post" action = "demoform. asp"> 
< label for = "fname" class = "ui — hidden - accessible"> 姓 名 : </label > 
< input type = "text" name = "fname" id= "fname" placeholder = "姓名 ..."> 
</form> 


域 容器 : 如 果 需 要 label 和 表单 元 素 在 宽屏 幕 上 显示 正常 ,请 用 带 有 data-role = 
"fieldcontain" 属 性 的 二 div 过 或 二 fieldset 之 元 素来 包装 label 或 表单 元 素 , 请 看 如 下 的 代码 。 


< div data - role = "page"> 
< div data - role = "content"> 
< form method = "post" action = "demoform.asp"> 
< div data - role = "fieldcontain"> 
< label for = "lname"> 姓 : </label > 
< input type = "text" name = "lname" id= "lname"> 
< label for = "fname"> 名 : </label > 
< input type = "text" name = "fname" id= "fname"> 
</div> 
< input type = "submit" data- inline = "true" value = "提交 "> 
</form> 
</div> 


</div> 


提示 : fieldcontain 属性 基于 页 面 宽度 来 设置 label 和 表单 控件 的 样式 。 当 页 面 宽度 大 
+ 480px 时 , 它 会 自动 将 label 与 表单 控件 放置 于 同一 行 。 当 小 于 480px 时 ,label 会 被 放置 
于 表单 元 素 之 上 。 如 需 避 免 jQuery Mobile 自动 为 可 单 击 元 素 设置 样式 ,请 使 用 data-role = 
"none" 属 性 ,代码 如 下 。 


< label for = "fname"> First name:</label > 
< input type = "text" name = "fname" id= "fname" data— role = "none"> 


文本 输入 : 输入 字段 是 通过 标准 的 HTML 元 素 编写 的 ,jQuery Mobile 会 为 它们 设置 
专门 针对 移动 设备 的 美观 易 用 的 样式 。 还 可 以 使 用 新 的 HTML5 的 一 input 二 类 型 ,如 下 面 
的 代码 ,显示 效果 如 图 6.22 所 示 o 


< div data - role= "content"> 
< form method = "post" action = "demoform. asp"> 
< div data- role = "fieldcontain"> 
< label for = "fullname"> 全 名 : </label > 
< input type = "text" name = "fullname" id= "fullname"> 
< label for = "bday"> 生 日 : </label> 
< input type = "date" name = "bday" id= "bday"> 
< label for = "email"> 电 邮 : </label > 
< input type = "email" name = "email" id= "email" placeholder = "您 的 邮箱 地 址 .."> 
</div> 
< input type = "submit" data- inline= "true" value = "提交 "> 
</form> 
</div > 


提示 : 请 使 用 placeholder 来 规定 简短 的 提示 ,以 描述 输入 字段 的 预期 值 。 


JQuery Mobile 


Th o 中 


# Web 开发 其 大 


图 6.22 文本 输入 框 


文本 框 : 请 使 用 二 textarea 一 来 实现 多 行文 本 输入 。 注 释 : 文本 框 会 自动 扩大 ,以 适应 
输入 的 文本 行 。 如 下 面 的 代码 ,显示 效果 如 图 6. 23 所 示 。 


< form method = "post" action = "demoform. asp"> 
< div data - role = "fieldcontain"> 
< label for = "info"> Additional Information:</label > 
< textarea name = "addinfo" id= "info"></textarea> 
</div> 
</form> 


Additional 
Information 


图 6.23 多 行文 本 框 


搜索 框 : 输入 类 型 type= "search": HTML5 中 的 新 类 型 ,用 于 定义 供 输入 搜索 词 的 
文本 字段 。 如 下 面 的 代码 ,显示 效果 如 图 6.24 所 示 。 


< div data - role = "page"> 
< div data - role = "header"> 
< hl > 搜索 框 </hl > 


</div> 


< div data - role = "content"> 
< form method = "post" action = "demoform.asp"> 
< div data - role = "fieldcontain"> 
< label for = "search"> 搜 索 : </label > 
< input type = "search" name = "search" id= "search" placeholder = "搜索 内 容 .…"> 
</div> 
< input type = "submit" data- inline = "true" value = "提交 "> 
</form> 
</div> 
</div> 


单 选 按钮 : 当 用 户 只 选择 有 限 数量 选项 中 的 一 个 时 ,会 用 到 单 选 按钮 。 如 需 创 建 一 套 


单 选 按钮 ,请 添加 type="radio" h} input 元 素 以 及 相应 的 label。 在 二 fieldset 二 元 素 中 包装 
单 选 按钮 。 也 可 以 增加 一 个 二 legend 盖 元 素来 定义 二 fieldset 二 的 标题 。 如 下 面 的 代码 , 显 


6.24 搜索 框 


示 效 果 如 图 6. 25 所 示 。 


提示 : 


请 用 data-role 二 "controlgroup" 属 性 来 组 合 这 些 按 钮 。 


< div data - role = "page"> 
< div data - role = "header"> 


<hl > 单 选 按钮 </hl > 


</di 


v> 


< div data - role = "content "> 


< form method = "post" action = "demoform.asp"> 


< fieldset data - role = "controlgroup"> 
< legend > 请 选择 您 的 性 别 : </1egend > 
< label for = "male"> 男 性 </label > 
< input type = "radio" name = "gender" id= "male" value = "male"> 
< label for = "female"> 女 性 </label > 
< input type = "radio" name = "gender" id= "female" value = "female"> 


</fieldset > 


< input type = "submit" data - inline = "true" value = "提交 "> 


</form> 
</div> 


</div> 


请 选择 您 的 性 别 ， 
男性 
女性 


提交 


图 6.25 单 选 按钮 


复 选 框 : 当 用 户 选 择 有 限 数 量 选项 中 的 一 个 或 多 个 选项 时 ,会 用 到 复 选 框 。 如 下 面 的 
代码 ,显示 效果 如 图 6. 26 所 示 。 


< div data - role = "page"> 


<div 
<hl > 
</div 


data - role = "header"> 
复 选 框 </hl > 


> 
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< div data - role = "content"> 
< form method = "post" action = "demoform.asp"> 
< fieldset data - role = "controlgroup"> 
< legend > 请 选择 您 喜爱 的 颜色 : </1egend > 

< label for = "red"> 红 色 </label> 
< input type = "checkbox" name = "favcolor" id= "red" value = "red"> 
< label for = "green"> 绿 色 </label > 
< input type = "checkbox" name = "favcolor" id= "green" value = "green"> 
< label for = "blue"> 蓝 色 </label> 
< input type = "checkbox" name = "favcolor" id= "blue" value = "blue"> 


</fieldset > 
< input type = "submit" data - inline = "true" value = "提交 "> 
</form> 
</div > 
</div> 
复 选 杠 
请 选择 您 喜爱 的 颜色 ， 

红色 

绿色 

Et 

提交 
图 6.26 复 选 框 


其 他 例子 : 如 需 对 单 选 框 或 复 选 框 进行 水 平分 组 ,请 使 用 data-type 二 "horizontal" 属 
性 。 如 下 面 的 代码 ,显示 效果 如 图 6. 27 所 示 。 


< div data - role = "page"> 
< div data - role = "header"> 
< hl > 单 选 按钮 和 复 选 框 </hl > 


</div > 


< div data - role = "content"> 
< form method = "post" action = "demoform. asp"> 

< fieldset data - role = "controlgroup" data - type = "horizontal"> 

< legend > 请 选择 您 的 性 别 : </legend> 
< label for = "male"> 男 性 </label > 
< input type = "radio" name = "gender" id= "male" value = "male"> 
< label for = "female"> 女 性 </label > 
< input type = "radio" name = "gender" id= "female" value = "female"> 

</fieldset > 


< fieldset data - role = "controlgroup" data - type = "horizontal"> 
< legend> 请 选择 您 喜爱 的 颜色 : </1egend> 
< label for = "red"> 红 色 </label> 


< input type = "checkbox" name = "favcolor" id= "red" value = "red"> 
< label for = "green"> 绿 色 </label > 
< input type = "checkbox" name = "favcolor" id= "green" value = "green"> 
< label for = "blue"> 蓝 色 </label> 
< input type = "checkbox" name = "favcolor" id= "blue" value = "blue"> 

</fieldset > 

< input type = "submit" data- inline = "true" value = "提交 "> 

</form> 
</div> 
</div> 


itu ki 


请 选择 您 的 性 别 ， 
男性 女性 
请 选择 您 喜爱 的 颜色 
红色 绿色 蓝 色 


提交 


图 6. 27 对 单 选 按钮 或 复 选 框 进行 水 平分 组 
当然 ,也 可 以 使 用 域 容器 来 包装 二 fieldset 二 ,如 下 面 的 代码 。 


< div data - role = "fieldcontain"> 
< fieldset data - role = "controlgroup"> 
< legend > Choose your gender:</legend> 
</fieldset > 
</div> 


如 果 和 希望 “预选 "其 中 一 个 按钮 ,请 使 用 HTML <input > PRA Hy checked 属性 ,如 下 面 
的 代码 o 


< input type = "radio" checked > 
< input type = "checkbox" checked> 


选择 菜单 :二 select 二 元 素 创 建 带 有 若干 选项 的 下 拉 菜 单 。 过 select 过 元素 中 的 
达 option 之 元 素 定 义 列表 中 的 可 用 选项 。 如 下 面 的 代码 ,显示 效果 如 图 6. 28 所 示 。 


< div data - role = "page"> 
< div data - role = "header"> 
< hl > 选择 菜单 </hl > 


</div> 


< div data - role = "content"> 
< form method = "post" action = "demoform. asp"> 
< fieldset data - role = "fieldcontain"> 
< label for = "day"> 选 择 天 </label> 
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< select name = "day" id= "day"> 
< option value = "mon"> 星 期 一 </option> 
< option value = "tue"> 星 期 二 </option > 
< option value = "wed"> 星 期 三 </option > 
< option value = "thu"> 星 期 四 </option> 
< option value = "fri"> 星 期 五 </option> 


< option valui sat"> 星 期 六 </option> 
< option value = "sun"> 星 期 日 </option> 
</select> 
</fieldset > 
< input type = "submit" data— inline = "true" value = "提交 "> 
</form> 
</div> 
</div> 
选择 天 = >= 
提交 


6.28 选择 菜单 


提示 : 如 果 列 表 中 包含 一 长 列 相关 的 选项 ,请 在 所 select 二 中 使 用 一 optgroup 二 元 素 ， 
如 下 面 的 代码 。 


< select name = "day" id= "day"> 
< optgroup labe1 = "Weekdays"> 
< option value = "mon"> Monday </option> 
< option value = "tue"> Tuesday </option > 
< option value = "wed"> Wednesday </option> 
</optgroup > 
< optgroup labe1 = "Weekends"> 
< option value = "sat"> Saturday </option > 
< option value = "sun"> Sunday </option> 
</optgroup > 
</select> 


自 定义 选择 菜单 : 图 6.28 展示 了 移动 平台 显示 选择 菜单 的 独特 方式 。 如 果 和 希望 在 所 
有 移动 设备 上 显示 一 致 外 观 的 选择 菜单 ,请 使 用 jQuery 的 自 定义 选择 菜单 ,设置 data- 


native-menu 一 "false" 属 性 。 


< select name = "day" id= "day" data- native - menu = "false"> 


Multiple Selections: 如 需 在 选择 菜单 中 选取 多 个 选项 ,请 在 过 select 二 元 素 中 使 用 
multiple 属性 ,选择 时 的 效果 如 图 6. 29 所 示 。 


< select name = "day" id= "day" multiple data- native — menu = "false"> 


图 6.29 自 定 义 选 择 菜单 


滑 块 控件 : 滑 块 允许 从 一 定 范围 内 的 数字 中 选取 值 。 如 需 创 建 滑 块 , 请 使 用 过 input 
type 一 "range" 之 。 如 下 面 的 代码 ,显示 效果 如 图 6.30 所 示 。 


< div data - role = "page"> 
< div data - role = "header"> 
< hl > 滑 块 控件 </hl > 


</div> 


< div data - role = "content"> 
< form method = "post" action = "demoform.asp"> 
< div data - role = "fieldcontain"> 
< label for = "points"> Points:</label > 
< input type = "range" name = "points" id= "points" value = "50" min = "0" max = "100"> 


</div> 
< input type = "submit" data- inline = "true" value = "提交 "> 
</form> 
</div> 
</div> 
Points: 50 
提交 
图 6.30 滑 块 控件 

使 用 下 列 属性 来 规定 限定 。 


max 一 一 规定 允许 的 最 大 值 。 
min 一 一 规定 允许 的 最 小 值 。 
step 一 一 规定 合法 的 数字 间隔 。 


JQuery Mobile 


wo% 


移动 Web FERR 


value 一 一 规定 默认 值 。 
提示 : 如 果 希 望 突出 显示 滑 块 控件 的 这 段 轨道 ,请 添加 data-highlight= "true" ,如 下 面 
的 代码 。 


< input type = "range" data - hightlight = "true"> 


切换 开关 : 切换 开关 常用 于 开 / 关 或 对 / 错 按钮 。 如 需 创建 切换 ,请 使 用 data-role = 
"slider" 的 二 select 过 元素, 并 添加 两 个 二 option 过 元素 。 如 下 面 的 代码 ,显示 效果 如 图 6. 31 
所 示 。 


< div data - role = "page"> 
< div data - role = "content"> 
< form method = "post" action = "demoform. asp"> 
< div data- role = "fieldcontain"> 
< label for = "switch"> 切 换 开 关 : </label> 
< select name = "switch" id= "switch" data - role = "slider"> 
< option value = "on"> On </option > 
< option value = "off"> Off </option > 
</select> 
</div> 
< input type = "submit" data- inline = "true" value = "提交 "> 
</form> 
</div> 
</div> 


图 6.31 切换 开关 
提示 : 请 使 用 selected 属性 来 把 选项 之 一 设置 为 预选 (突出 显示 ), 如 下 面 的 代码 。 


< option value = "off" selected> Off </option> 


6.12 jQuery Mobile 主题 


jQuery Mobile 提供 了 5 种 不 同 的 样式 主题 ,从 a 到 e, 如 表 6.6 所 示 。 每 种 主题 带 有 不 
同 颜色 的 按钮 、 栏 内容 块 ,等 等 。jQuery Mobile 中 的 一 种 主题 由 多 种 可 见 的 效果 和 颜色 
构成 。 

如 需 定 制 应 用 程序 的 外 观 ,请 使 用 data-theme 属性 ,并 为 该 属性 分 配 一 个 字母 ,如 下 面 
的 代码 。 


< div data - role = "page" data- theme = "a|b|c| d| e"> 


表 6.6 样式 主题 


值 描 æ 

a 默认 。 黑 色 背 景 上 的 白色 文本 

b 蓝 色 背 景 上 的 白色 文本 /灰色 背景 上 的 黑色 文本 
c 亮 灰 色 背 景 上 的 黑色 文本 

d 白色 背景 上 的 黑色 文本 

e 橙色 背景 上 的 黑色 文本 


默认 地 ,jQuery Mobile 为 页 眉 和 页 脚 使 用 a 主题 ,为 页 眉 内 容 使 用 c 主题 ( 亮 灰 ) 。 不 


过 也 可 以 对 主题 进行 混合 。 
主题 化 的 页 面 、. 内 容 和 页 脚 : 如 下 面 的 代码 ,显示 效果 如 图 6.32 所 示 。 


< div data- role = "page" id= "pageone"> 
< div data- role = "header" data - thene = "b"> 


<hl > 此 处 是 页 面 标题 </hl > 


</div > 


< div data - role = "content" data - theme = "a"> 
<p> 此 处 是 内 容 .</p> 
<a href = " # " data- role = "button"> 按 钮 </a> 
<p> 此 处 是 <a href = " # "> 链接 </a>!</p> 


</div> 


< div data - role = "footer" data - theme = "e"> 
< hl > 此 处 是 页 脚 文 本 </hl > 
</div> 
</div> 


此 处 是 页 面 标题 


此 处 是 页 脚 文本 


图 6.32 主题 化 的 页 面 、 内 容 和 页 脚 
主题 化 的 对 话 框 : 如 下 面 的 代码 ,显示 效果 如 图 6.33 所 示 。 


< div data - role = "page" id= "pageone"> 
< div data - role = "header"> 
< h1 > 欢迎 来 到 我 的 主页 </hl > 


</div> 


< div data - role = "content"> 
<p> 这 是 一 张 标准 页 面 。</p> 
<a href = " # pagetwo" data — rel = "dialog"> 转 到 主题 化 的 对 话 页 面 </a> 
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</div> 


< div data - role = "footer"> 
<hi > 页 脚 文 本 </hl > 
</div> 
</div> 


< div data- role = "page" id= "pagetwo" data — overlay ~ theme = "e"> 
< div data- role = "header" data — theme = "b"> 
< hl > 我 是 主题 化 的 对 话 框 </hl > 


</div> 


< div data - role = "content" data ~ theme = "a"> 
< p> data - overlay- theme 属性 规定 对 话 框 出 现在 其 上 的 页 面 的 背景 色 。</p> 
< a href =" 井 pageone"> 转 到 页 面 一 </a> 

</div> 


< div data - role = "footer" data - theme = "c"> 
<hl > 页 脚 文本 </hl > 
</div> 
</div> 


我 是 主题 化 的 对 话 框 


theme 属性 # 


页 脚 文本 
图 6.33 主题 化 的 对 话 框 
主题 化 的 按钮 : 如 下 面 的 代码 ,显示 效果 如 图 6.34 所 示 。 


< div data - role = "page" id= "pageone"> 
< div data - role = "header"> 
< h1 > 此 处 是 页 面 标题 </hl > 


</div> 


< div data - role = "content" data ~ theme = "e"> 
<p> 此 处 是 页 面 内 容 。</p> 
<a href = " # " data- role = "button"> 按 钮 </a> 
<p> 默 认 地 ,页 面 的 子 元 素 会 继承 应 用 主题 的 父 元 素 的 样式 - 在 这 种 情况 下 ,上 面 的 按钮 会 被 自 
动 赋予 的 data- theme 为 "e", </p> 


<p> 如 需 人 工 添加 按钮 的 样式 ,请 在 链接 中 添加 data- theme 属性 : </p> 
<a href = " # " data- role = "button" data- theme = "a"> 按 钮 </a> 
<a href = " # " data- role = "button" data — theme = "b"> 按 钮 </a> 
<a href = " # " data- role = "button" data — theme = "c"> 按 钮 </a> 
</div> 


< div data - role = "footer"> 


<hl > 页 脚 文 本 </hl > 


</div > 
</div> 
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图 6.34 主题 化 的 按钮 
主题 化 的 图 标 : 如 下 面 的 代码 ,显示 效果 如 图 6. 35 所 示 。 


< div data - role = "page" id= "pageone"> 
< div data - role = "content"> 
< a href =" # " data- role = "button" data — icon = "arrow — l" data - iconpos = "notext" data 一 
theme = "a"> Left Arrow Icon</a> 
<a href = " # " data- role = "button" data — icon = "arrow — r" data - iconpos = "notext" data 一 
theme = "b"> Right Arrow Icon</a> 
<a href = " # " data- role = "button" data — icon = "arrow — u" data - iconpos = "notext" data 一 
theme = "c"> Up Arrow Icon</a> 
< a href =" # " data- role = "button" data - icon = "arrow — d" data — iconpos = "notext" data 一 
theme = "d"> Down Arrow Icon </a > 
<a href = " # " data- role = "button" data ~ icon = "plus" data - iconpos = "notext" data 一 
theme = "e"> Plus Icon </a > 
</div > 
</div> 


00000 


6.35 主题 化 的 图 标 
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页 眉 和 页 脚 中 的 主题 化 按钮 : 如 下 面 的 代码 ,显示 效果 如 图 6. 36 所 示 。 


< div data - role = "page" id= "pageone"> 
< div data - role = "header"> 
<a href = " # " data- role = "button" data — icon = "home" data - theme = "b"> 首 页 </a> 


< hl > 欢迎 来 到 我 的 主页 </hl > 
<a href ="#" data- role = "button" data- icon = "search" data - theme = "e"> 搜 索 </a> 
</div> 


< div data - role = "content"> 


<P> 此 处 是 内 容 …</p> 


</div> 


< div data - role = "footer"> 

<a href =" # " data- role = "button" data —- theme = "b" data — icon = "plus"> 转 播 到 新 浪 微 博 
</a> 

<a href = " # " data - role = "button" data - theme = "c" data - icon = "plus"> 转 播 到 腾讯 微 博 
</a> 

<a href = " # " data - role = "button" data - theme = "e" data - icon = "plus"> 转 播 到 QQ 空间 
</a> 

</div> 
</div> 


此 处 是 内 容 
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图 6.36 页 眉 和 页 脚 中 的 主题 化 按钮 
主题 化 的 导航 栏 : 如 下 面 的 代码 ,显示 效果 如 图 6.37 所 示 。 


< div data - role = "page" id= "pageone"> 
< div data - role = "header"> 
< h1 > 此 处 是 页 面 标题 </hl > 


</div> 


< div data - role= "content"> 


<p> 工 具 栏 中 的 导航 栏 将 自动 继承 其 父 元 素 的 样式 。 如 需 定制 每 个 按钮 的 外 观 , 请 在 链接 内 添 
加 data - theme 属性 。</p> 
</div> 


< div data- role = "footer" data - theme = "e"> 


< hi > 此 处 是 页 脚 文本 </hl > 
< div data - role = "navbar"> 
<ul> 


<li><a href = " # " data- icon = "home" data — theme = "b"> 按 钮 1 </a></1i> 
<li><a href = " #" data- icon = "arrow - r">##l 2 </a></1i> 


<li><a href = " # " data- icon = "arrow r">#z#ll 3 </a></1i> 


<li><a href = " # " data- icon = "search" data- theme = "a" > 按钮 4 </a></1i> 


</ul> 
</div> 
</div> 
</div> 


此 处 是 页 面 标题 


工具 栏 中 的 导航 栏 将 自动 继承 其 父 元 素 的 样式 。 如 需 定制 每 个 按钮 的 外 观 ， 请 在 链接 内 添 
加 data-theme 属性 。 


此 处 是 页 脚 文本 
m : 
图 6.37 主题 化 的 导航 栏 
主题 化 的 可 折叠 按钮 和 内 容 : 如 下 面 的 代码 ,显示 效果 如 图 6. 38 所 示 。 


< div data - role = "content"> 


< div data - role = "collapsible" data - theme = "b" data — content ~- theme = "e"> 


<hl > 点 击 我 - 我 是 可 折 人 的 !</hl > 
<p> 我 是 可 折合 内 容 。</p></div> 


</div> 


图 6.38 ”主题 化 的 可 折 秋 按钮 和 内 容 
主题 化 列表 : 如 下 面 的 代码 ,显示 效果 如 图 6.39 所 示 。 


< div data - role = "page" id= "pageone"> 
< div data - role = "content"> 

< h2 > 有 序列 表 </h2 > 

< ol data- role = "listview" data - theme = "b"> 
<li><a href ="#"> 列 表 项 </a></1i> 
<li><a href = " # ">#|J ë Tji</a ></1i > 
<li data - theme = "a">< a href =" 井 "> 列表 项 </a></1i> 
<li><a href =" 井 "> 列表 项 </a></1i> 

</ol> 

<br> 

< h2 > 无 序列 表 </h2 > 

< ul data- role = "listview" data - theme = "e"> 
<li><a href ="#"> 列 表 项 </a></1i> 
<li data- theme = "a">< a href =" 井 "> 列表 项 </a></1i> 
<li data- theme = "b">< a href ="#"> 列 表 项 </a></1i> 
<li><a href = " # ">#|| ëJi</a></1i> 
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</ul> 
<br> 
</div> 
</div> 


有 序列 表 


图 6.39 主题 化 的 列表 
主题 化 划分 按钮 : 如 下 面 的 代码 ,显示 效果 如 图 6.40 所 示 。 


< div data - role = "page" id= "pageone"> 
< div data - role = "content"> 
< h2 > 划分 按钮 实例 </h2 > 
<ul data- role = "listview" data- inset = "true" data- split - theme = "e"> 
< li data - role = "divider" data- theme = "a"> 浏 览 器 </1i> 
ea kina 
<a href = " # "> 
< img src = "/i/chrome. png"> 
< h2 > Google Chrome </h2 > 
< p> Google Chrome 是 一 款 免 费 的 开源 浏览 器 。 发 布 于 2008 年 。</p> 
</a> 
<a href = " # download" data - rel = "dialog" data - transition = "pop"> 下 载 浏 览 器 </a> 
</li> 
<li> 
<a href="#"> 
< img src = "/i/firefox. png"> 
< h2 > Mozilla Firefox </h2 > 
<p>Firefox 是 一 款 来 自 Mozilla。 发 布 于 2004 年 。</p> 
</a> 
<a href = " # download" data- rel = "dialog" data- transition = "pop"> 下 载 浏览 器 </a> 
</li> 
</ul> 
</div> 
</div> 


< div data - role = "page" id= "download" data - overlay ~ theme = "e"> 
< div data - role = "content "> 


<h3 > 划分 按钮 实例 </h3 > 
<p> 下 面 的 按钮 仅 供 演 示 。</p> 
<a href =" # " data- role = "button" data - rel = "back" data - theme = "b" data — icon = 
"check" data- inline = "true" data - mini = "true"> 下 载 </a> 
<a href = " # " data- role = "button" data - rel = "back" data - inline = "true" data - mini 
= "true"> 取 消 </a> 
</div> 
</div> 


划分 按钮 实例 
Google Chrome Ə 
4 Google Chrome -RERAN EHEZ - F 2008 年。 
Ñ) Mozilla Firefox ° 
Firet $RG Mozilla. 发 布 于 2004 年 。 


图 6. 40 “主题 化 划分 按钮 
主题 化 的 可 折合 列表 : 如 下 面 的 代码 ,显示 效果 如 图 6.41 所 示 。 


< div data - role = "page" id= "pageone"> 
< div data - role = "header"> 
<hl > 主题 化 的 可 折合 列表 </hl > 


</div> 


< div data - role = "content"> 
< div data - role = "collapsible" data - theme = "b" data — content - theme = "e"> 
<h4>A</h4> 
<ul data- role = "listview"> 
<li><a href =" # "> Adam </a></li> 
<li><a href =" # "> Angela </a></li> 
</ul> 
</div> 


< div data - role = "collapsible" data - theme = "b" data — content - theme = "a"> 
<h4>B</h4> 
<ul data- role = "listview"> 
<li><a href =" # "> Bill </a></li> 
<li><a href = " # "> Bob</a></1i> 
</ul> 
</div> 


< div data - role = "collapsible" data - theme = "b" data — content - theme = "d"> 
<h4>C</h4> 
<ul data- role = "listview"> 

<li><a href =" # "> Calvin</a></1i> 

<li><a href = " # "> Cameron </a></li> 
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<li><a href =" # "> Christina </a></li> 
</ul> 
</div> 
</div > 


< div data - role = "footer"> 
<hl > 此 处 是 页 脚 文 本 </hl > 
</div> 

</div> 


主题 化 的 可 折 查 列表 


此 处 是 页 脚 文本 


图 6.41 主题 化 的 可 折 秋 列表 


主题 化 表单 : 如 下 面 的 代码 ,显示 效果 如 图 6.42 所 示 。 


< div data - role = "page" id= "pageone"> 
< div data - role = "header"> 
< hl > 主题 化 表单 </hl > 


</div> 


< div data - role = "content" data ~ theme = "e"> 

< form method = "post" action = "demoform. asp"> 

< div data - role = "fieldcontain"> 
< label for = "name"> 全 名 : </label > 
< input type = "text" name = "text" id= "name" placeholder = "您 的 姓名 ..." data- theme = "a"> 
<br><br> 


< label for = "search"> 您 需要 搜索 什么 ?</label > 

< input type = "search" name = "search" id= "search" placeholder = "需要 搜索 的 内 容 .…." data- 
theme = "d"> 

<br><br> 


< label for = "date"> 今 天 的 日 期 : </label > 
< input type = "date" name = "date" id = "date"> 
<br><br> 


< label for = "colors"> 请 选择 喜爱 的 颜色 : </label> 

< select id= "colors" name = "colors" data— theme = "b"> 
< option value = "red"> 红 色 </option> 
<option value = "green"> 绿 色 </option> 
<option value = "blue"> 蓝 色 </option> 


</select> 
<br><br> 


< label for = "switch"> 切 换 开 关 : </label > 


< select name = "switch" id= "switch" data - role = "slider" data- theme = "a"> 


<option value = "on"> On </option> 

< option value = "off"> Off </option> 
</select > 
<br><br> 


< div data - role = "controlgroup"> 
< legend > 请 选择 喜爱 的 电影 : </legend> 
< label for = "mov1"> 蜂 蛛 侠 </label > 
< input type = "checkbox" name = "movl" id= "movl" data - theme = "a"> 
< label for = "mov2"> 变 形 金 刚 </label > 
< input type = "checkbox" name = "mov2" id= "mov2" data - theme 
< label for = "mov3"> 星 球 大 战 </label > 
< input type = "checkbox" name = "mov3" id= "mov3" data - theme = "c"> 
</div> 

</div> 

< input type = "submit" data- inline = "true" value = "提交 "> 

</form> 

</div> 

</div> 


z 


图 6.42 主题 化 的 表单 
主题 化 的 可 折 又 表单 : 如 下 面 的 代码 ,显示 效果 如 图 6.43 所 示 。 


< div data - role= "content"> 
< form method = "post" action = "demoform. asp"> 
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< fieldset data - role = "collapsible" data- theme = "b" data- content - theme = "e"> 
< legend> 点 击 我 - 我 是 可 折 仅 的 !</legend> 
< label for = "name"> 全 名 : </label > 
< input type = "text" name = "text" id= "name"> 
<p> 喜 爱 的 颜色 : </p> 
< div data - role= "controlgroup"> 
< label for = "red"> 红 色 </label > 
< input type = "checkbox" name = "favcolor" id= "red" value = "red"> 
< label for = "green"> 绿 色 </label > 
< input type = "checkbox" name = "favcolor" id= "green" value = "green"> 
< label for = "blue"> 蓝 色 </label> 
< input type = "checkbox" name = "favcolor" id= "blue" value = "blue"> 
</div> 
< input type = "submit" data- inline = "true" value = "提交 " data- theme = "a"> 
</fieldset > 
</form> 
</div> 


点 击 我 -我 是 可 折 要 的 ! 


图 6.43 主题 化 的 可 折 释 表单 


添加 新 主题 : jQuery Mobile 同时 允许 向 移动 页 面 添加 新 主题 。 

请 通过 编辑 CSS 文件 (如 已 下 载 jQuery Mobile) 来 添加 或 编辑 新 主题 。 只 需 复制 一 段 
样式 ,并 用 字母 名 (f-z) 来 对 类 进行 重 命 名 .然后 调整 为 用 户 喜 欢 的 颜色 和 字体 即 可 。 

还 可 以 通过 在 HTML 文档 中 使 用 主题 类 来 添加 新 样式 ,为 工具 条 添加 类 ui-bar-(a-z)， 
并 为 内 容 添 加 类 ui-body-(a-z) ,如 以 下 代码 所 示 。 


<style> 

su = bar = £ 

í 

color:green; 

background - color: yellow; 
j} 

.ui-— body- f 

Í 

font ~ weight : bold; 
color:purple; 


} 
</style> 


< div data - role = "page"> 
< div data- role = "header" data - theme = "f"> 
<hl > 应 用 "f" 主题 的 标题 </hl > 


</div> 


< div data - role = "content" data - theme = "f"> 
<p> 应 用 新 的 "f" 主题 的 内 容 !</p> 
</div> 
</div> 


6.13 jQuery Mobile 事件 


jQuery Mobile 还 提供 若干 种 为 移动 浏览 定制 的 事件 。 

(1) 触摸 事件 一 一 当 用 户 触 摸 屏幕 时 触发 ( 敲 击 和 滑动 ) 。 

(2) 滚动 事件 一 一 当 上 下 滚动 时 触发 。 

(3) 方向 事件 一 一 当 设备 垂直 或 水 平 旋转 时 触发 。 

(4) 页 面 事件 一 一 当 页 面 被 显示 、 隐 藏 , 创 建 、 加 载 以 及 /或 印 载 时 触发 。 

初始 化 jQuery Mobile 事件 : 在 jQuery 中 ,可 以 使 用 文档 ready 事件 来 阻止 jQuery 代 
码 在 文档 结束 加 载 (is ready) 前 运行 ,如 下 面 的 代码 。 


< Script> 
$ (document). ready(function(){ 
$ ("p").on("click",function()( 
$ (this).hide(); 
H; 
H); 


</script> 


<p> 如 果 您 点 击 我 ,我 会 消失 。</p> 
<p> 点 击 我 ,我 会 消失 。</p> 
<p> 点 击 我 ,我 也 会 消失 。</p> 


然而 ,在 jQuery Mobile 中 使 用 pageinit 事件 .该 事件 在 页 面 已 初始 化 并 完善 样式 设置 
后 发 生 。 如 下 代码 ,第 二 个 参数 指向 (" 并 pageone") 指 定 了 事件 页 面 的 id。 


< Script> 
$ (document). on("pageinit"," # pageone",function(){ 
$ ("p").on("click", function(){ 
$ (this). hide(); 
H; 
H; 


</script> 
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< div data - role = "page" id= "pageone"> 
< div data - role = "header"> 
<hl > 页 眉 文 本 </hl > 


</div> 


< div data - role = "content"> 
<p> 如 果 您 点 击 我 ,我 会 消失 。</p> 
<p> 点 击 我 ,我 会 消失 。</p> 
<p> 点 击 我 ,我 也 会 消失 。</p> 


</div> 


< div data - role = "footer"> 
< hl > 页 脚 文本 </hl > 
</div> 
</div> 


注释 : jQuery on() 方 法 用 于 添加 事件 处 理 程序 。 

jQuery Mobile Tap 事件 : tap 事件 在 用 户 斋 击 某 个 元 素 时 触发 。 下 面 的 例子 为 当 二 p 记 元 
素 上 和 触发 tap 事件 时 ,隐藏 当前 过 p> 元 素 。 

$ ("p").on("tap",function()( 


$ (this).hide(); 
H; 


jQuery Mobile Taphold 事件 : taphold AFE JH P Bitik HETE R JFR RE — ED T gk ih Aè» 
如 下 面 的 代码 。 


$ ("p").on("taphold",function()( 
$ (this).hide(); 
H; 


jQuery Mobile Swipe 事件 : swipe 事件 在 用 户 在 某 个 元 素 上 水 平滑 动 超过 30px 时 被 触 
发 ,如 下 面 的 代码 。 
$ ("p").on("swipe", function(){ 


$ ("span"). text("Swipe detected! "); 
H; 


jQuery Mobile Swipeleft 事件 : swipeleft 事件 在 用 户 在 某 个 元 素 上 从 左 滑动 超过 30px 
时 被 触发 ,如 下 面 的 代码 。 


$ ("p").on("swipeleft", function(){ 
alert("You swiped left!"); 
1) 


jQuery Mobile Swiperight 事件 : swiperight 3# fF fE H] F! EHEAR EAA W 2JJ R jf 
30px 时 被 触发 ,如 下 面 的 代码 。 


$ ("p").on("swiperight",function()( 
alert("You swiped right! "); 
H; 


jQuery Mobile Scrollstart 事件 : scrollstart 事件 在 用 户 开 始 滚动 页 面 时 被 触发 ,如 下 面 
的 代码 。 


$ (document). on("scrollstart",function(){ 
alert(" 开 始 滚动 !") 
H; 


jQuery Mobile Scrollstop 事件 : scrollstop 事件 在 用 户 停止 滚动 页 面 时 被 触发 ,如 下 面 
的 代码 。 


$ (document). on("scrollstop", function( ){ 
alert(" 结 束 滚动 !"); 
H; 


jQuery Mobile orientationchange 事件 : orientationchange 事件 在 用 户 垂 直 或 水 平 旋转 
移动 设备 时 被 触发 。 如 需 使 用 orientationchange 事件 ,请 把 它 添加 到 window 对 象 , 如 下 面 
的 代码 。 


$ (window). on("orientationchange",function(){ 
alert(" 方 向 已 改变 !"); 
H; 


callback 函数 可 以 设置 一 个 参数 , 即 event 对 象 , 它 会 返回 移动 设备 的 方向 : portrait (iZ 
备 被 握 持 的 方向 是 垂直 的 ?或 landscape( 设 备 被 握 持 的 方向 是 水 平 的 ) ,如 下面 的 代码 。 


$ (window). on("orientationchange", function(event){ 
alert(" 方 向 是 : " + event.orientation); 
H; 


由 于 orientationchange 事件 与 window 对 象 绑 定 ,可 以 使 用 window. orientation 属性 
来 设置 不 同样 式 以 区 分 portrait 和 landscape 视图 ,如 下 面 的 代码 。 


$ (window). on("orientationchange", function(){ 


if(window. orientation == 0) //Portrait 
{ 
$ ("p").css({"background— color" :"yellow", "font — size" :"300 %"}); 
} 
else //Landscape 
{ 
$ ("p").css({"background— color":"pink", "font ~ size":"200% "}); 
|. 


H); 


jQuery Mobile 
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提示 : window. orientation 属性 对 portrait 视图 返回 0, 对 landscape 视图 返回 90 或 
—90, 

jQuery Mobile 页 面 事件 : 在 jQuery Mobile 中 与 页 面 打交道 的 事件 被 分 为 以 下 4 类。 

(1) Page Initialization 一 一 在 页 面 创建 前 , 当 页 面 创建 时 ,以 及 在 页 面 初始 化 之 后 触发 。 

(2) Page Load/Unload 一 一 当 外 部 页 面 加载 时 、 印 载 时 或 遭遇 失败 时 触发 。 

(3) Page Transition 一 一 在 页 面 过 渡 之 前 和 之 后 触发 。 

(4) Page Change 一 一 当 页 面 被 更 改 , 或 遭遇 失败 时 触发 。 

jQuery Mobile Initialization 事件 : 当 jQuery Mobile 中 的 一 个 典型 页 面 进行 初始 化 时 ， 
它 会 经 历 三 个 阶段 : 在 页 面 创建 前 、 页 面 创 建 、 页 面 初始 化 。 每 个 阶段 触发 的 事件 都 可 用 于 
插入 或 操作 代码 , 见 表 6.7. 


表 6.7 jQuery Mobile Initialization 事件 


事 F Ho 述 
pagebeforecreate 当 页 面 即将 初始 化 ,并 且 在 jQuery Mobile 已 开始 增强 页 面 之 前 ,触发 该 事件 
pagecreate 当 页 面 已 创建 ,但 增强 完成 之 前 ,触发 该 事件 
pageinit 当 页 面 已 初始 化 ,并 且 在 jQuery Mobile 已 完成 页 面 增强 之 后 ,触发 该 事件 


下 面 的 例子 演示 在 jQuery Mobile 中 创建 页 面 时 , 何 时 触发 每 种 事件 ,如 下 面 的 代码 。 


$ (document). on("pagebeforecreate", function(event){ 
alert(" 触 发 pagebeforecreate 事件 !"); 

H); 

$ (document). on("pagecreate", function(event) { 
alert(" 触 发 pagecreate 事件 !"); 

H; 

$ (document). on("pageinit", function(event) { 
alert(" 触 发 pageinit 事件 !") 

H); 


jQuery Mobile Load 事件 : 页 面 加 载 事件 属于 外 部 页 面 。 
无 论 外 部 页 面 何 时 载 人 DOM, 将 触发 两 个 事件 。 第 一 个 是 pagebeforeload ,第 二 个 是 
pageload( 成 功 ) 或 pageloadfailed( 失 败 )。 表 6. 8 解释 了 这 些 事件 。 


表 6.8 jQuery Mobile Load 事件 


# IF E Ë 
pagebeforeload ”在 任何 页 面 加 载 请 求 做 出 之 前 触发 
pageload 在 页 面 已 成 功 加 载 并 插入 DOM 后 触发 


pageloadfailed 如 果 页 面 加 载 请 求 失败 , 则 触发 该 事件 。 默 认 地 ,将 显示 “Error Loading Page” 消 息 
下 面 的 例子 演示 了 pageload 和 pageloadfailed 事件 的 工作 原理 。 
$ (document). on("pageload", function(event, data) { 


alert(" 触 发 pageload 事件 !\nURL: " + data. url); 
]) 


$ (document). on("pageloadfailed", function(event, data) [ 
alert(" 抱 区 ,被 请 求 页 面 不 存在 。"); 
H; 


jQuery Mobile 过 渡 事件 : 还 可 以 在 从 一 页 过 渡 到 下 一 页 时 使 用 事件 。 页 面 过 渡 涉及 两 
个 页 面 : 一 张 “ 来 ”的 页 面 和 一 张 “ 去 ”的 页 面 , 这 些 过 渡 使 当前 活动 页 面 (“ 来 的 ?页 面 ) 到 新 
页 面 (“ 去 的 ”页面 ) 的 改变 过 程 变 得 更 加 动感 。 表 6. 9 解释 了 这 些 事件 。 
表 6.9 jQuery Mobile 过 渡 事 件 


事 fF #f Ë 
pagebeforeshow 在 “去 的 ”页 面 触发 ,在 过 渡 动 画 开始 前 
pageshow 在 “去 的 ”页 面 触发 ,在 过 渡 动 画 完成 后 
pagebeforehide 在 “来 的 ”页 面 触发 ,在 过 渡 动 画 开始 前 
pagehide 在 “来 的 ”页面 触发 ,在 过 渡 动 画 完 成 后 


下 面 的 代码 演示 了 过 渡 事 件 的 工作 原理 。 


$ (document). on("pagebeforeshow", " # pagetwo", function(){ // 当 进入 页 面 二 时 
alert(" 页 面 二 即将 显示 "); 

H; 

$ (document). on("pageshow", " # pagetwo", function( ){ // 当 进入 页 面 二 时 
alert(" 现 在 显示 页 面 二 "); 

H); 

$ (document). on( "pagebeforehide"," # pagetwo", function(){ // 当 离开 页 面 二 时 
alert(" 页 面 二 即将 隐藏 ")， 

H); 

$ (document). on("pagehide", " # pagetwo", function( ){ // 当 离开 页 面 二 时 
alert(" 现 在 隐藏 页 面 二 "); 

H); 


小 结 
音 主 要 介绍 了 jQuery Mobile 框架 的 用 户 接口 和 特性 ,如 页 面 的 切换 效果 、 基 本 页 面 


按钮 .图 标 、 工 具 栏 导航 栏 、 可 折 秋 效果、 网 格 、 列 表 、 表 单 、 主 题 以 及 事件 ,以 便于 开发 人 员 
在 移动 应 用 上 使 用 。 通 过 使 用 该 框架 可 以 开发 出 真正 的 移动 Web 网 站 。 
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本 章 学 习 目标 
。 Sencha Touch 开发 环境 搭建 
。 Sencha Touch 的 基本 使 用 


Sencha Touch 是 一 个 移动 HTML5 开发 框架 (以 下 简称 ST) ,可 以 让 Web App 看 起 来 
像 Native App。 美 丽 的 用 户 界 面 组 件 和 丰富 的 数据 管理 ,全 部 基于 最 新 的 HTML5 和 
CSS3 的 Web 标准 ,全 面 兼 容 Android 和 Apple iOS 设备 。 下 面 是 ST 官方 给 出 的 几 点 

(1) 基于 最 新 的 Web 标准 一 -HTML5 CSS3 .JavaScript。 整 个 库 在 压缩 和 gzip 后 大 
约 80OKB, 通 过 禁用 一 些 组 件 还 会 使 它 更 小 。 

(2) 支持 世界 上 最 好 的 设备 。 兼 容 Android #l iOS, Android 上 的 开发 人 员 还 可 以 使 用 
一 些 专 为 Android 定制 的 主题 。 

(3) 增强 的 触摸 事件 。 在 touchstart、touchend 等 标准 事件 基础 上 ,增加 了 一 组 自 定义 
事件 数据 集成 ,如 tap、swipe、pinch、rotate 等 。 

(4) 数据 集成 。 提 供 了 强大 的 数据 包 , 通 过 AJAX.JSON.YQL 等 方式 绑 定 到 组 件 模 
板 , 写 入 本 地 离线 存储 。 

(5) 采用 ExtJS4 强大 的 类 系统 ,使 开发 者 可 以 通过 JavaScript 创建 和 继承 已 有 的 类 ， 
类 系统 提供 了 继承 .依赖 加 载 .强大 的 配置 选项 等 内 容 。 


7.1 开发 环境 准备 


开发 环境 不 需要 准备 太 多 ,只 需要 满足 以 下 的 条 件 。 
(1) Sencha touch2 SDK 。 
(2) 一 个 支持 HTML5 的 浏览 器 ,推荐 使 用 谷歌 的 Chrome 和 苹果 的 Safari, 


7.2 Sencha Touch2 SDK 


先 下 载 Sencha Touch 框架 (http://www. sencha. com/products/touch/)。 

将 下 载 的 Sencha Touch 开发 包 解压 可 以 看 到 以 下 文件 ,如 图 7.1 所 示 。 

builds 目录 是 打包 过 后 的 一 些 JS 文件。 

command 是 ST 自 带 的 一 些 打包 工具 ,例如 ,将 ST 的 原生 态 应 用 打包 成 支持 Android 


Ebuilds | THR 2012-3-29 9:42 


O command TFR 2012-3-29 9:41 
docs 文件 来 2012-3-29 9:43 
O examples TR 2012-3-29 9:42 
Bnicroloader TFE 2012-3-29 9:41 
Orkes 文件 来 2012-3-29 9:44 
resources 文件 来 2012-3-29 9:41 
re TFR 2012-3-29 9:41 
Ë). senchasdk 1 KB SENCHASIK 文件 2012-3-8 8:39 
@ cetting started. html 1 KB Chrome HTML Doc.. 2012-3-6 8:39 
@ index. htnl 1 KB Chrome HINL Doc... 2012-3-8 8:39 
E) license. txt 36B 文本 文档 2012-3-6 8:41 
(Z release-notes htnl 127 KB Chrome HTML Doc... 2012-3-6 8:39 
F) sencha-touch. js 91 KB JScript Script ... 2012-3-8 8:39 
S sencha touch-all. js 568 KB JScript Script ... 2012-3-6 8:39 
S) sencha-touch-all-debug. js 2,389 KB JScript Script ... 2012-3-6 8:39 
虽 sencha-touch-debug. js 489 KB JScript Script ... 2012-3-6 8:39 
[E] touch. jst3 57 KB JSB3 文件 2012-3-6 8:39 
E) version. txt 16 文本 文档 2012-3-6 8:39 


7.1 Sencha Touch 开发 包 
设备 的 apk 安装 文件 等 。 
docs 是 官方 的 API 参考 文档 ,需要 部 署 在 Web 容器 中 才 可 以 查看 。 例 如 Tomcat, 
examples 是 ST 的 官方 实例 ,里 面包 含 完整 的 源 代码 ,基本 包括 ST 的 所 有 组 件 及 应 用 
程序 的 开发 样 例 , 因 此 是 学 习 ST 的 最 佳 文档 。 
mircoloader 是 ST2 一 个 重大 的 改进 ,类 加 载 器 ,优化 了 ST 组 件 的 载 和 速度。 
resources 是 ST 的 一 些 资源 文件 ,包括 CSS 样式 .主题 文件 等 ,例如 ST 给 开发 者 提供 
了 Android、Apple 等 常用 移动 设备 平台 的 主题 ,开发 中 通常 也 需要 引用 此 目录 下 的 一 些 样 
AXi, 
src 是 ST 组 件 的 源 代 码 , 如 图 7.2 所 示 。 
以 上 几 个 是 ST 的 核心 库 文件 。sencha-touch. js 是 包含 部 1 
分 组 件 的 一 个 库 文件 , 它 是 经 过 压缩 处 理 后 的 库 文 件 ; sencha- “Zsenchactouch-a1l. js 
touch-all. js 则 是 包含 ST 所 有 组 件 的 库 文件 ,通常 在 开发 过 程 x sS 
中 也 是 引用 此 库 文件 ; sencha-touch-all-debug. js 顾名思义 是 用 
来 调试 的 ,因为 包含 缩 进 ,所 以 方便 调试 ; sencha-touch-debug. js 
也 是 用 来 调试 的 。 


图 7.2 ST 组 件 的 源 代码 


7.3 ”框架 的 加 载 


至 此 已 经 了 解 了 开发 ST 应 用 所 需 的 环境 ,也 了 解 了 ST 的 官方 SDK 的 一 些 情况 , 接 下 
来 就 是 如 何在 自己 的 项 目 中 引用 ST 框架 ,开始 ST 开发 之 旅 。 

首先 在 HTML 页 面 的 head 标签 中 间 引 入 ST 框架 的 CSS 样式 文件 ,JS 库 文件 ,如 
图 7.3 所 示 。 

注意 : 这 里 引入 的 CSS 及 JS 文件 路 径 应 根据 自己 的 目录 结构 做 相应 的 调整 。 

app.js 是 用 户 自己 定义 的 JavaScript 文件 ,一 般 一 个 应 用 都 有 一 个 app. js 文件 作为 应 
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<!DOCTYPE html> 
<html> 


pt 
a gg app 文 件 


SI 的 js 库 文件 
<title> 通 知 公告 </title> 3 


<meta http-equiv="Content-Type" À ent="text/htm. = utf-8" Pe A 
<link href="lib/sencha/resources/ cs: ncha-touch.csg® rel=" — rel ayiee as type="text/css"/> 
<script type="text/javascript”" src=" en I oe y Eha-touch-all. jy script; 

<script type="text/ javascript" srce=tāpp.js">%/ script> 


图 7.3 ST 框架 


用 的 启动 文件 ,在 这 里 面 会 写 一 些 关 于 应 用 启动 加 载 的 代码 ,具体 的 app. js 如 何 去 写 将 在 
稍 后 章节 中 详细 阐述 。 接 下 来 看 看 整个 ST 应 用 的 一 个 目录 结构 是 怎样 的 ,如 图 7.4 所 示 。 


= 23 文件 来 2012-6-15 13:32 
回 :ss 文件 来 2012-6-15 13:32 
回 inmages 文件 来 2012-6-15 13:32 
Bj: 文件 来 2012-6-15 13:32 
li 文件 来 2012-6-15 13:32 
Sapp. js 1 KB JScript Script ... 2012-4-16 10:10 
© index. htnl 2 KB Chrome HTML Doc... 2012-7-3 11:19 


图 7.4 ST 应 用 的 目录 结构 


app 目录 包含 ST 应 用 的 控制 器 \ 模 型 .代理 ,数据 存储 器 、 视 图 ,设备 配置 文件 等 ,打开 
app 目录 如 图 7.5 所 示 。 

controller 目录 对 应 ST 应 用 的 控制 器 ,按照 官方 的 MVC 开发 模 
式 , 所 有 的 控制 处 理 逻 辑 代码 都 应 该 在 此 目录 之 下 , 它 类 似 J2EE 开发 


Drofile 


中 MVC 模式 的 C, 是 集中 控制 应 用 程序 的 行为 。model 包含 一 些 模 Oprroxy 


型 定义 文件 ,对 应 于 MVC 开发 模式 的 M, 它 是 应 用 程序 需要 用 到 的 二 
模型 的 定义 , 它 的 含义 和 J2EE 开发 中 MVC 模式 的 模型 意义 相似 。 Orie 


profile 是 配置 各 个 平台 的 一 个 启动 配置 文件 ,如 果 应 用 程序 需要 在 不 
同 的 平台 及 不 同 的 设备 上 运行 , 则 可 能 需要 在 此 配置 每 个 设备 平台 的 
专属 配置 文件 ,例如 在 Android, iOS 或 者 iPad 等 平台 及 设备 上 。proxy 是 和 ST 应 用 中 数 
据 交互 密 不 可 分 的 , 它 相 当 于 一 个 数据 获取 的 来 源 , 充 当代 理 获取 数据 的 一 个 角色 ,store H 
录 则 是 ST 的 一 个 核心 部 分 , 它 是 和 所 有 数据 存储 有 关 的 。view 则 是 经 典 MVC 模式 中 的 
V, 它 提供 了 应 用 程序 中 视图 的 部 分 ,用 来 展现 ST 应 用 的 UI 部分。 这样, model, view, 
controller 就 组 成 了 ST 应 用 的 一 个 MVC 模式 ,在 ST2 的 官方 文档 及 实例 中 都 极力 推荐 采 
用 MVC 模式 来 开发 自己 的 应 用 ,因为 这 样 有 一 个 好 处 ,应 用 程序 的 数据 、 视 图 ,行为 控制 分 
离 ,代码 结构 清晰 ,便于 日 后 的 维护 ,同样 更 适用 于 实现 组 件 化 开发 。 


图 7.5 app 目录 


7.4 Sencha Touch 应 用 开发 模式 之 MVC 


MVC 结构 是 常用 的 数据 结构 ,应 用 起 来 也 比较 标准 。 

M 数据 模型 : 在 应 用 程序 中 表示 一 种 数据 模型 ,比如 一 个 电子 商务 应 用 程序 可 能 会 有 
用 户 、 产 品 、 订 单 等 不 同 的 数据 模型 。 

V 视图 : 负责 将 数据 展示 给 用 户 , 并 扩充 Sencha Touch 的 内 置 组 件 。( 可 以 理解 为 用 
户 界面 的 一 个 个 组 成 部 分 。) 


C 控制 器 : 处 理应 用 程序 的 交互 , 侦 听 用 户 的 轻 触 、 猛 击 等 事件 并 做 出 相应 的 响应 。 

S 数据 存储 器 : 负责 把 数据 加 载 到 应 用 并 以 列表 (List) 或 者 数据 视图 (DataView) 等 形 
式 表 现 出 来 。 

了 设备 配置 : 可 以 为 平板 电脑 和 手机 等 不 同 设备 ,轻易 定制 应 用 程序 用 户 界面 ,并 尽 可 
能 多 地 共享 代码 。 

Sencha touch2 的 MVC 结构 如 图 7. 6 所 示 。 


Model Application Profile 
l | l 
i i 


View | Store | 


Controller 


7.6 Sencha touch2 的 MVC 结构 
对 象 通常 是 开发 一 个 ST 应 用 时 需要 定义 的 第 一 个 东西 ,类 似 下 面 这 样 。 


Ext. application({ 
name: 'MyApp', 
models: [ 'User', 'Product', 'nested.Order'], 
views: ['OrderList', 'OrderDetail', 'Main'], 
controllers: [ 'Orders'], 
launch: function() { 
Ext. create( 'MyApp. view.Main'); 
} 
D; 


如 代码 所 示 application 构造 参数 中 有 一 个 name 属性 , 它 为 应 用 程序 创建 一 个 唯一 命 
名 空间 ,其 下 包含 该 应 用 全 部 的 model, view, controller 还 有 其 他 class( 类 ) ,比如 一 个 叫做 
MyApp 的 应 用 就 应 该 遵循 以 下 形式 来 组 织 : MyApp. model. User, MyApp. controller. 
Users、MyApp. view. Main 等 ,这 可 以 保证 整个 应 用 程序 都 处 在 一 个 唯一 全 局 变量 下 ,从 而 
最 大 限度 降低 代码 冲突 的 可 能 性 。 

应 用 程序 会 按照 在 application 构造 函数 中 定义 好 的 models, views 和 controllers 属性 
成 员 来 自动 加 载 它们 对 应 的 class( 类 ) 到 当前 应 用 ,ST2 架构 约定 的 文件 结构 如 下 : model 
都 放 在 app/model 目录 ,controller 都 放 在 app/controller 目录 ,view 则 放 在 app/view H 
录 , 比 如 app/model/ User. js,app/controller/Orders. js, app/view/Main. js, 这 样 应 用 程序 
就 可 以 自动 找到 并 加 载 这 些 类 ,通过 这 里 就 基本 可 以 了 解 到 ST 应 用 其 实 就 是 一 个 
HTML, 一 个 app. js 再 加 上 分 别处 于 app/model、app/view、app/controller 之 下 的 一 堆 
model, view controller 文件 。 除 了 遵循 上 述 常规 命名 格式 以 外 ,还 可 以 使 用 完整 类 名 的 方 
式 来 定义 这 些 配 置 ,换言之 ,application 构造 函数 中 的 models, views, controllers 这 些 参数 
属性 都 可 以 用 完整 类 名 方式 来 定义 。 
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7.4.1 控制 器 


controller 就 像 胶水 一 样 黏合 出 一 个 完整 的 应 用 程序 ,它们 侦 听 UI 界面 触发 的 事件 ， 
然后 做 出 相应 的 动作 ,还 能 够 让 开发 者 的 代码 更 简洁 ,可 读 性 好 ,从 而 把 界面 逻辑 和 控制 多 
辑 隔 离开 来 。 

假如 用 户 通过 一 个 login 表单 来 登录 应 用 程序 ,此 时 的 view 就 是 这 个 包含 所 有 字段 和 
其 他 元 素 的 表单 ,而 它 的 controller 要 做 的 就 是 侦 听 表单 提交 按钮 的 点 触 事 件 并 进行 身份 
验证 ,每 次 要 处 理 数据 或 者 状态 的 时 候 , 这 个 controller 才 是 应 该 起 作用 的 类 ,而 不 是 view。 

controller 通过 一 些 简单 的 约定 ,展示 了 一 套 虽 小 但 很 强大 的 特性 。 应 用 程序 的 每 一 个 
controller 都 是 Ext. app. Controller 的 一 个 子 类 , 当然 用 户 也 可 以 继承 现 有 的 controller, R 
要 它 继 承 自 Ext. app. Controller, 它 都 存在 于 MyApp. controller. * 的 命名 空间 ,例如 ,程序 
中 有 一 个 叫做 Sessions 的 controller, 那 么 它 的 命名 空间 就 是 MyApp. controller. Sessions 
并 且 被 定义 在 app/controller/Sessions. js 文件 中 。 

每 个 controller 都 是 Ext. app. Controller 的 一 个 子 类 ,加 载 它 的 应 用 程序 也 只 会 对 它 实 
例 化 一 次 ,应 用 程序 自己 会 控制 每 个 controller 在 同一 时 间 只 有 一 个 实例 。 用 户 使 用 
Application 对 象 的 controllers 参数 来 加 载 controller 并 且 会 自动 实例 化 它们 。 

这 里 将 演示 如 何 快速 定义 上 面 描述 的 Sessions 控制 器 ,将 使 用 controller 的 两 个 配置 
参数 ,refs 和 control, refs 是 找到 页 面 组 件 的 简单 方式 ,这 个 例子 里 controller 会 搜索 所 有 
formpanel 类 型 的 控件 ,然后 将 找到 的 第 一 个 赋值 给 loginForm 属性 ,这 个 属性 会 在 下 面 的 
doLogin 方法 中 用 到 。 

然后 要 做 的 是 配置 control 参数 , 像 refs 一 样 使 用 ComponentQuery 选择 器 来 查找 所 有 
包含 button 控件 的 formpanel 下 的 button 控件 ,在 本 例 中 ,将 会 得 到 登录 表单 当中 的 提交 
按钮 ,任意 一 个 符合 此 条 件 的 button 触发 了 vap 事件 , controller 都 会 去 调用 其 中 的 
doLogin 函数 。 例 子 代码 如 下 。 


Ext. define( 'MyApp. controller. Sessions', { 
extend: 'Ext. app. Controller', 
config: { 

refs: { 
loginForm: 'formpanel' 
} 
control: { 
'formpanel button': { 
tap: 'doLogin' 
} 
} 
k 
doLogin: function() { 
var form = this. getLoginForm(), 
values = form. getValues(); 
MyApp. authenticate( values); 


doLogin 函数 本 身 非常 容易 理解 ,由 于 前 面 定 义 了 一 个 叫做 loginForm 的 ref, controller 将 
会 自动 生成 一 个 叫做 getLoginForm 的 函数 用 来 返回 该 formpanel, 待 完成 对 这 个 form 的 
引用 之 后 ,只 需要 把 其 中 的 值 ( 用 户 名 和 密码 ) 取 出 来 然后 传递 给 身份 验证 函数 即 可 。 


7.4.2 数据 存储 器 


Store( 数 据 存储 器 ) 是 ST 的 重要 组 成 部 分 , 它 能 够 实现 大 部 分 的 组 件数 据 绑 定 工作 。 
简单 来 说 ,一 个 Store 就 是 一 个 由 Model (数据 模型 ) 的 实例 组 成 的 数组 ,诸如 List 和 
DataView 这 类 的 数据 绑 定型 控件 ,它们 会 为 Store 中 的 每 一 个 Model 实例 泻 染 一 个 item 
(这 里 指数 据 绑 定 控件 的 子 项 ) ,Store 中 的 Model 实例 被 添加 或 者 删除 的 时 候 会 触发 数据 
绑 定 控件 的 相应 事件 ,从 而 实现 控件 的 更 新 。 


7.4.3 设备 配置 文件 


ST 可 以 跨越 非常 广泛 的 平台 ,尽管 这 些 平台 拥有 不 同 的 性 能 和 屏幕 尺寸 。 一 个 在 平 
板 电 脑 上 工作 良好 的 UI 并 不 一 定 适应 手机 界面 ,反之 亦 然 。 所 以 为 不 同 设备 提供 定制 过 
的 不 同 view( 视 图 ) 是 一 件 很 有 必要 的 事情 ,同时 又 希望 可 以 让 不 同 设备 共享 尽 可 能 多 的 
代码 。 

Device Profile( 设 备 配 置 ) 是 一 些 简单 的 类 ,这 些 类 能 定义 程序 支持 的 不 同类 型 设备 以 
及 如 何 处 理 这 些 不 同 。Device Profile 不 是 必需 的 ,一 开始 不 定义 Profile 以 后 再 添加 ,甚至 
永远 不 定义 它们 。 每 个 Profile 都 要 定义 一 个 简单 的 isActive 函数 ,用 来 返回 当前 设备 上 是 
否 应 该 启用 此 Profile( 换 言 之 ,该 Profile 是 否 匹 配 当前 的 设备 ) ,并 为 该 Profile #ü À — MË 
(当前 Profile 中 约定 的 )model view 和 controller, 

要 为 应 用 程序 添加 Profile 支持 功能 ,只 需 告 诉 应 用 程序 有 哪些 Profile 需要 被 支持 , 然 
后 为 它们 各 自 创 建 Ext. app. Profile 的 子 类 即 可 。 


Ext. application({ 

name: 'MyApp', 

profiles: [ 'Phone', 'Tablet'] 
H; 


如 上 面 代码 所 示 ,应 用 程序 会 加 载 app/profile/Phone. js 和 app/profile/ Tablet. js 两 个 
文件 ,假定 平板 电脑 的 版 本 将 会 拥有 一 些 额 外 的 能 力 ,比如 对 组 的 管理 功能 ,下 面 的 例子 将 
演示 如 何 定义 Tablet 的 Profile。 


Ext. define( 'MyApp. profile. Tablet', { 
extend: 'Ext. app. Profile', 
config: { 

controllers: [ 'Groups'], 
views: [ 'GroupAdmin'], 
models: [ 'MyApp. mode1. Group'] 
} 
isActive: function() { 
return Ext. os. is. Tablet; 
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) 
H; 


当 ST 检测 到 设备 是 一 台 平 板 电脑 时 ,isActive 函数 将 会 返回 true。 鉴 于 现在 不 断 涌现 
出 的 各 种 新 设备 ,其 外 形 和 尺寸 已 经 越 来 越 模 糊 了 手机 和 平板 电脑 的 界限 ,故而 无 法 界定 哪 
些 设备 是 平板 哪些 设备 是 手机 ,ST 的 Ext. os. is. Tablet 只 有 在 iPad 上 运行 的 时 候 将 被 设 
定 为 true, 其 他 则 为 false ,如果 需要 更 好 的 判断 和 控制 ,可 以 通过 在 isActive 函数 中 进行 更 
多 的 检测 ,来 控制 它 返回 true 还 是 false, 

必须 保证 只 有 一 个 Profile 的 isActive 函数 可 以 返回 true, 如果 超过 一 个 的 话 , 只 有 第 

会 有 效 而 其 他 将 被 忽略 ,第 一 个 返回 true 的 Profile 将 被 视 做 应 用 程序 的 当前 Profile。 

如 果 检 测 到 的 当前 Profile 定义 了 额外 的 model( 数 据 模型 )、view( 视 图 )、controller( 控 
制 器 )、store( 数 据 存 储 器 ) ,它们 会 与 application 当中 定义 的 其 他 元 素 一 起 被 自动 加 载 。 而 
所 有 在 Profile 中 定义 的 元 素 路 径 前 面 都 会 被 加 上 Profile 的 名 称 ,除非 对 它们 定义 了 完整 
路 径 的 类 名 ,如 下 所 示 。 

views: [GroupAdmin] 将 会 加 载 app/view/tablet/GroupAdmin. js (因为 GroupAdmin 
是 在 Tablet Profile 中 配置 的 ) 。 

controllers: [Groups KAME app/controller/tablet/Groups. js (同上 ) 。 

models: [MyApp. model. Group’] 将 会 加 载 app/model/Group. js (因为 使 用 了 完整 
路 径 ) 。 

绝 大 多 数 情况 下 ,Profile 只 会 定义 额外 的 controller 和 view, 因 为 model 和 store 一 般 
情况 下 都 会 被 共享 。 


7.4.4 应 用 启动 


每 个 Application 对 象 都 会 定义 一 个 launch 函数 , 它 将 会 在 应 用 程序 所 需 的 全 部 class 
加 载 完 成 , 且 应 用 程序 已 经 做 好 准备 的 情况 下 执行 。 一 般 来 说 ,这 里 就 是 用 来 放置 应 用 程序 
启动 逻辑 的 最 好 位 置 了 ,比如 可 以 在 这 里 为 应 用 创建 主要 view 框架 。 

除了 Application 中 的 launch 函数 之 外 ,还 有 两 个 地 方 可 以 放置 启动 逻辑 : 四 每 个 
controller( 控 制 器 ) 都 可 以 定义 一 个 init 函数 ,这 个 函数 将 会 运行 在 application 的 launch 运 
行 之 前 ; @ 如 果 使 用 了 设备 Profile, 每 一 个 Profile 都 可 以 定义 一 个 launch 函数 , 它 将 会 在 
controller 的 init 之 后 和 application 的 launch 之 前 被 调用 。 

注意 : 只 有 活动 Profile 的 launch 函数 才 会 被 调用 ,比如 分 别 定 义 了 phone 和 Tablet 
的 Profile ,现在 是 在 tablet 上 运行 它 ,那么 只 有 Tablet Profile 中 的 launch 函数 会 被 调用 
到 。 以 下 是 调用 顺序 。 

(1) Controller 的 init 首先 被 调用 。 

(2) 其 次 是 当前 Profile 的 launch 被 调用 。 

(3) 然后 Application 的 launch 被 调用 。 

(4) 最 后 是 其 他 controller 的 launch 被 调用 。 


7.4.5 路 由 和 访问 历史 支持 
ST2 具有 完整 的 路 由 和 访问 历史 支持 ,SDK 中 的 好 几 个 例子 都 使 用 了 历史 路 径 支持 ， 


以 实现 通过 后 退 按钮 可 以 轻易 地 在 屏幕 之 间 回 退 导航 ,这 一 点 在 Android 上 尤其 有 用 。 


7.5 组 件 的 使 用 


ST 有 着 自己 丰富 的 组 件 , 在 ST 中 接触 的 很 多 类 都 是 组 件 ,每 个 组 件 都 是 Ext. 
Component 的 子 类 。 使 用 这 些 组 件 可 以 构建 绝 大 多 数 应 用 程序 ,如 常用 的 表单 组 件 、 面 板 
组 件 、 按 钮 组 件 等 ,下 面 对 这 些 组 件 做 一 个 详细 的 分 类 , 见 表 7.1. 


表 7.1 ST 组 件 
组 件 名 类 xtype 备 注 

Component Ext. Component 无 所 有 组 件 的 父 类 

Audio Ext. Audio audio 音频 组 件 

Button Ext. Button button 按钮 组 件 

Label Ext. Label label 标签 组 件 

Img Ext. Img img 或 者 image ”图片 组 件 

Mask Ext. Mask mask 加 载 标记 组 件 

LoadMask Ext. LoadMask loadmask 加 载 标 记 组 件 

Map Ext. Map map 地 图 组 件 

MessageBox Ext. MessageBox 无 弹出 消息 框 

Msg Ext. Msg 无 弹出 消息 框 

SegmentedButton Ext. SegmentedButton segmentedbutton 按钮 

Spacer Ext. Spacer spacer 分 隔 线 

Toolbar Ext. Toolbar toolbar 工具 条 

TitleBar Ext. TitleBar titleBar 标题 栏 工具 

Viewport Ext. Viewport 无 视图 组 件 

Video Ext. Video video 视频 组 件 

DatePicker Ext. picker. Date datepicker 下 拉 框 日 历 选 择 器 

Picker Ext. picker. Picker picker 通用 下 拉 框 组 件 

Panel Ext. tab. Panel panel 面板 

FieldSet Ext. form. FieldSet fieldset 表单 组 件 

ActionSheet Ext. ActionSheet actionsheet 自 下 而 上 弹出 式 按钮 组 ,iOS 设备 上 
常用 

Carousel Ext. carousel. Carousel carousel 滑动 面板 组 件 , 在 多 个 面板 之 间 通 过 
滑动 进行 切换 

DataView Ext. dataview. DataView — dataview 数据 视图 组 件 ,常用 于 list 组 件 

IndexBar Ext. dataview. IndexBar indexbar 快速 检索 工具 条 ,常见 于 智能 移动 设 
备 通讯 录 的 快速 检索 工具 条 

List Ext. dataview. List list 数据 列表 组 件 ,类 似 于 表格 控件 

NestedList Ext. dataview. NestedList nestedlist 数据 列表 组 件 , 不 同 于 list 组 件 的 是 ， 
它 提 供 树 形 展现 方式 ,根据 树 的 层级 
结构 展示 列表 内 容 

View Ext. navigation. View navigationview 导航 视图 组 件 ,可 以 通过 push 和 pop 
自动 管理 组 件 ,任意 时 刻 只 有 一 个 活 
动 的 视图 
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应 用 程序 是 由 很 多 组 件 组 成 的 ,它们 被 一 个 个 的 组 件 包含 着 。 容 器 也 像 组 件 ,但 除了 组 
件 的 功能 以 外 ,还 可 以 泻 染 和 插入 新 的 组 件 。 大 部 分 App 都 有 唯一 的 一 个 最 上 层 容 器 叫做 
“Viewport”, 它 占 满 了 整个 屏幕 , 子 组 件 被 包含 在 它们 里 面 。 容 器 主要 有 三 个 功能 : 在 初始 
化 和 运行 的 时 候 添加 新 的 组 件 ; 移 除 组 件 ; 指定 组 件 布局 。 

布局 确定 了 组 件 在 屏幕 上 的 显示 方式 ,ST 提供 了 多 种 布局 方式 ,可 以 方便 开发 者 完成 
组 件 布局 。 


7.5.2 初始 化 组 件 
组 件 的 初始 化 和 ST 中 其 他 类 的 初始 化 一 样 ,使 用 Ext. create 方法 。 
7.5.3 配置 组 件 


用 户 可 以 通过 configuration 选项 对 任意 一 个 组 件 进行 配置 。 所 有 的 configuration 都 
在 组 件 类 的 Config Options 中 。 可 以 在 组 件 初始 化 时 传人 任意 个 配置 选项 ,也 可 以 在 组 件 
初始 化 之 后 对 它 的 配置 进行 修改 。 

任何 一 个 配置 都 有 Getter 和 Setter 方法 ,它们 是 自动 生成 的 。 例 如 ,一 个 配置 选项 叫 
做 “html”, 那 么 将 会 有 一 个 getHtml 和 一 个 setHtml 方法 ; 一 个 默认 的 配置 拥有 一 个 
getDefault 方法 和 一 个 setDefault 方法 。 


7.5.4 使 用 ST 已 有 的 组 件 


ST 中 有 两 种 方式 用 来 创建 组 件 , 第 一 种 是 在 config 中 通过 xtype 直接 申明 组 件 , 第 二 
种 是 通过 Ext. create() 方 法 创建 组 件 。 


Ext. define( 'NoticeApp. view. LoginViewport', { 
extend: 'Ext. Panel', 
xtype: 'loginviewport', 
requires: [ 
'NoticeApp. view. SystemLogin' 


id:'loginNavigationview', 
xtype: 'navigationview', 
navigationBar:false, 
items:[ 
{ 
xtype: 'systemlogin' 
} 


} 
initialize: function(){ 
//to do something 
} 
H); 


如 上 面 示 例 代 码 中 ,通过 xtype: navigationview 申明 了 一 个 navigationview 导航 视图 
组 件 。 

通过 xtype: systemlogin 申明 了 一 个 组 件 ,请 注意 systemlogin 这 个 组 件 或 者 说 是 视图 
在 标准 的 ST 组 件 中 并 没有 找到 ,是 因为 这 是 一 个 自 定义 的 组 件 或 者 说 是 视图 。 

下 面 是 通过 Ext. create 方法 创建 组 件 


Ext. create( 'NoticeApp. view. MainViewport', { 
fullscreen: true, 
layout: 'card' 

H; 


这 段 示 例 代 码 中 通过 Ext. create 方法 创建 了 一 个 类 为 NoticeApp. view. Main Viewport 
的 组 件 ,同样 ,MainViewport 这 个 视图 是 自 定 义 的 视图 ,通常 在 ST 开发 中 ,需要 去 继承 已 
有 的 组 件 类 来 扩展 或 者 自 定义 自己 的 视图 ,这 样 符 合 MVC 的 开发 模式 ,通过 将 各 种 组 件 通 
过 一 定 的 布局 方式 黏合 在 一 起 形成 自己 的 视图 组 件 ,也 为 实现 组 件 复 用 葛 定 了 基础 。 


7.5.5 定义 自己 的 组 件 (视图 类 ) 


ST 提供 的 组 件 虽 然 有 很 多 ,但 是 这 些 定 制 化 的 组 件 样 式 、 包 括 布局 等 并 不 一 定 都 能 满 
足 用 户 所 有 的 要 求 , 因 此 有 时 候 需要 自己 定义 自己 的 组 件 , 这 当然 是 在 继承 已 有 的 组 件 基础 
之 上 的 。 在 ST 中 通过 Ext. define 方法 类 定义 自己 的 类 ,这 个 类 可 以 继承 现 有 的 ST 类 ,也 
可 以 是 自己 独立 开发 的 一 个 类 。 在 定义 类 的 同时 ,可 以 给 这 个 类 注册 一 个 xtype, 注册 
xtype 有 什么 好 处 呢 ? 一 类 注册 xtype 后 ,任何 地 方 只 要 加 入 对 此 类 的 依赖 ,通过 xtype 就 
可 以 使 用 该 类 或 者 说 是 组 件 、 视 图 。 比 如 说 ,通过 继承 MessageBox 类 来 改变 ST 默认 的 消 
息 弹出 框 风格 ,这 样 可 以 指定 一 个 xtype, 今 后 就 可 以 直接 使 用 这 个 xtype 类 ,使 用 自 定义 风 
格 的 消息 弹出 框 了 。 当 然 也 可 以 通过 Ext. create 通过 类 的 全 限定 名 来 创建 该 类 。 


7.6 布 局 


7.6.1 Box 市 局 


Sencha Touch 里 的 布局 有 5 种 : 分 别 是 hbox、vbox、card,fit、auto( 上 默认 )。 

实际 上 可 以 分 为 Box 布局 和 Fit 布局 两 种 。Sencha Touch 里 的 布局 应 该 理解 为 : 该 控 
件 内 部 子 项 的 排列 方式 。 先 来 看 看 Box 布局 。 

顾名思义 ,Box 布局 就 是 一 个 个 的 Box 组 成 的 , 它 又 分 为 hbox 和 vbox, hbox 是 水 平 
排列 、 垂 直 居 中 、 靠 左 置顶 ; vbox 是 竖 直 堆 释 、 水 平 居 中 、 靠 上 置顶 。 
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hbox 布局 ,如 图 7.7 所 示 。 
vbox 布局 ,如 图 7. 8 所 示 。 


图 7.7 hbox 布局 图 7.8 vbox 布局 


但 是 ,只 是 知道 这 些 , 还 不 足以 清楚 Box 布局 ,下 面 看 看 其 他 常见 的 Box 布局 实例 。 
vbox 变型 一 ,如 图 7.9 所 示 。 
vbox 变型 二 ,在 代码 中 加 入 width:"100%", 如 图 7.10 所 示 。 


i: = 


图 7.9 vbox 变型 一 图 7.10 vbox 变型 二 


了 解 以 上 内 容 之 后 ,再 来 看 看 经 典 的 九宫 格 布局 的 实现 ,经 典 的 九宫 格 布局 ,如 图 7. 11 
所 示 。 

在 经 典 的 九宫 格 布局 的 基础 上 设置 margin, padding 属性 ,就 成 为 松散 九宫 格 布局 ,如 
7.12 所 示 。 


图 7.11 经 典 的 九宫 格 布局 图 7.12 松散 九宫 格 布局 


到 这 里 ,对 Box 布局 已 经 有 了 一 个 大 致 的 了 解 , 接 下 来 将 接着 讲解 Sencha Touch 里 的 
另 一 种 布局 。 


7.6.2 Card 布局 


1. Fit 布局 

Fit 布局 很 有 特点 , 它 只 允许 自己 的 第 一 个 item 被 显示 出 来 ,并 且 填 充满 自己 。 如 果 它 
的 item 多 于 一 个 ,难免 会 出 一 些 意外 的 情况 。 

如 果 发 现 容器 内 的 控件 有 的 没有 全 部 被 显示 出 来 , 那 不 
妨 看 看 它 的 layout 是 否 为 fit, 试 着 将 它 强 制 设 为 vbox 往往 
就 能 解决 问题 。 

7. 13 是 在 一 个 layout 为 fit 的 Panel 里 放 了 三 个 
button 的 效果 。 

所 以 说 ,除非 应 用 程序 需要 这 种 效果 ,否则 请 不 要 在 fit 
布局 的 容器 里 面 放 超过 一 个 对 象 。 

2. Card 布局 

Sencha Touch 中 ,Card 布局 继承 Fit 布局 ,也 是 使 用 得 比较 多 的 一 个 布局 ,许多 的 界面 
切换 都 需要 这 个 布局 的 Panel 的 参与 。Sencha Touch 中 使 用 Card 布局 的 有 : TabPanel、 
Carousel, Card 布局 内 的 东西 就 是 把 它 一 层 层 堆 在 里 面 ,要 显示 哪 一 层 的 时 候 , 只 需要 调用 
容器 的 setActiveltem。 

另外 ,因为 TabPanel „Carousel 本 身 都 是 Card 布局 ,因此 可 以 调用 它 的 setActiveltem() 来 
改变 当前 显示 的 内 容 。 

下 面 的 例子 演示 了 如 何 使 用 Card 布局 进行 画面 的 切换 ,代码 如 下 。 


7.13 Fit 布局 


Var myApp = new Ext.Application({ 
name: 'myApp', 
launch: function () ( 


var myPanell = new Ext.Panel({ 
id: 'myPanell', 
layout: 'vbox', 
html: 'Oh, this is Panel1! ', 
items: ( 
xtype: 'button', 
text: ' 前 往 Panel2', 
handler: function(){ 
myApp. views. mainPanel. setActiveItem(// 设 置 活 动 项 的 方法 
'myPane12', // 第 一 个 参数 为 myPanel2 的 id 
'slide' // 这 个 参数 为 切换 效果 


var myPanel2 = new Ext.Panel({ 
id: 'myPanel2', 
layout: 'vbox', 
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小 结 


本 章 主要 介绍 了 Sencha Touch 如 何 搭建 开发 环境 ,其 开发 模式 ,以 及 组 件 和 布局 ,通过 
本 章 的 学 习 , 可 以 利用 Sencha Touch 的 特性 去 开发 Web 应 用 程序 。 


第 8 = PhoneGap 应 用 


本 章 学 习 目标 
。 PhoneGap 开发 环境 搭建 
。 PhoneGap 的 基本 使 用 


PhoneGap 是 一 个 用 基于 HTML CSS 和 JavaScript 的 ,用 来 创建 路 平台 移动 应 用 程序 
的 快速 开发 框架 。 它 使 开发 者 能 够 利用 iPhone, Android, Palm, Symbian, WP7, Bada 和 
Blackberry 智能 手机 的 核心 功能 一 一 包括 地 理 定位 、 加 速 器 ,联系 人 、 声 音 和 振动 等 ,此 外 
PhoneGap 拥有 丰富 的 插件 ,可 以 以 此 扩展 无 限 的 功能 。PhoneGap 是 免费 的 ,但 是 它 需要 
特定 平台 提供 的 附加 软件 ,例如 iPhone 的 iPhone SDK. Android 的 Android SDK 等 ,也 可 
以 和 DW5.5 配套 开发 。 使 用 PhoneGap 只 比 为 每 个 平台 分 别 建立 应 用 程序 好 一 点 点 ,因为 
虽然 基本 代码 是 一 样 的 ,但 是 仍然 需要 为 每 个 平台 分 别 编译 应 用 程序 。 

PhoneGap 针对 不 同 平台 的 WebView 做 了 扩展 和 封装 ,使 WebView 这 个 组 件 变 成 可 
访问 设备 本 地 API 的 强大 浏览 器 ,所 以 开发 人 员 在 PhoneGap 框架 下 可 通过 JavaScript W 
问 设备 本 地 API。WebView 是 什么 ? WebView 组 件 实质 是 移动 设备 的 内 置 浏览 器 ， 
WebView 这 个 内 置 浏 览 器 的 特性 是 Web 能 被 打包 成 本 地 客户 端的 基础 ,可 方便 地 用 
HTML5 、CSS3 页 面 布局 。 

PhoneGap 的 优势 在 于 以 下 几 点 。 

(1) 可 跨 平台 : PhoneGap 是 唯一 支持 7 个 平台 的 开源 移动 框架 (PhoneGap 包括 地 理 
定位 、 加 速 器 、 联 系 人 、 声 音 和 振动 等 ,此 外 PhoneGap 拥有 丰富 的 插件 ,可 以 以 此 扩展 无 限 
的 功能 ,几乎 Native App 能 完成 的 功能 它 都 能 完成 )。 它 的 优势 是 无 与 伦比 的 ; 开发 成 本 
低 一 一 据 估 算 ,至 多 是 Native App 的 五 分 之 一 。 

(2) 易 用 性 ,基于 标准 的 Web 开发 技术 (HTML 十 CSS 十 JavaScript)。 

(3) 提供 硬件 访问 控制 (APD 。 

(4) 可 利用 成 熟 JavaScript 框架 (JQueryMobile SenchaTouch)。 

(5) 安装 和 使 用 方便 。 

随 着 2011 Æ 10 H 4 H Adobe 宣布 收购 了 创建 了 HTML5 移动 应 用 框架 PhoneGap 和 
PhoneGap Build 的 新 创 公 司 Nitobi Software。 这 使 得 PhoneGap 有 了 坚强 的 后 盾 ， 
PhoneGap 的 发 展 前 景 也 是 一 片 光 明 。 与 此 同时 ,PhoneGap 的 开源 框架 已 经 被 累计 下 载 60 
万 次 ,借助 PhoneGap 平台 ,已 有 数 千 应 用 程序 建立 在 iOS, Android 以 及 其 他 操作 系统 
之 上 。 
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8.1 开发 环境 搭建 (Android F) 


PhoneGap 是 一 个 开发 跨 平台 的 HTML5 本 地 化 程序 的 平台 ,通过 它 可 以 把 网 页 变 为 
各 种 平台 上 的 应 用 程序 。 开 发 环境 的 搭建 主要 有 以 下 4 个 步骤 。 

(1) 到 官网 http://phonegap. com 下 载 PhoneGap。 笔 者 下 载 的 版 本 是 PhoneGap-2. 9. 0。 

(2) 浏览 下 载 完 的 Zip 包 , 如 图 8. 1 所 示 。 


| ~ menm 


组 织 ” 包含 到 库 中 HE7 MEHR 


名 称 修改 日 期 类 型 

Ë android 2013/6/26 17:38 文件 去 
Ë blackberry 2013/6/26 17:38 文件 卖 
Ë cordova-cli 2013/6/26 17:38 x= 
k ios 2013/6/26 17:38 x= 
k osx 2013/6/26 17:38 x= 
册 windows8 2013/6/26 17:38 文件 去 
À windows-phone-7 2013/6/26 17:38 文件 去 
出 windows-phone-8 2013/6/26 17:38 文件 去 


图 8.1 PhoneGap Zip 包 内 容 


(3) 在 系统 里 已 经 安装 好 了 Eclipse 3.8 和 Android 4.0, 
(4) 新 建 工程 ,如 图 8.2 所 示 。 


[3 New Android Application Ejaz 


New Android Application 
Creates a new Android Application 


Application Name:0 HelloAndroid 


Project Name:0 HelloAndroid 


Package Name: comjava.helloandroid 


Minimum Required SDK:O[AAPI 14: Android 4.0 (IceCreamSandwich) š 
Target SDK:O[API 14: Android 4.0 (IceCreamSandwich) ~ 
Compile With:6 API 14: Android 4.0 (IceCreamSandwich) D 
Theme:e[Helo Light with Dark Action Bar = 
@ [< Back Enish | [2 canca 


8.2 新 建 工程 


(5) 加 入 PhoneGap 包 。 

O 创建 目录 : 

/libs 目录 : 这 个 用 于 放 cordova-2. 9. 0. jar。 
/assets/www: 这 个 用 于 放 cordova. js, 如 图 8. 3 所 示 。 


a 让 HelloAndroid 
b $ src 
b Ë8 gen [Generated Java Files] 
> mÀ Android 4.0 
> mà Android Private Libraries 
> mÀ Android Dependencies 
a D assets 
4 @ ww 
B cordovajs 
@ index.html 
> @ bin 
4 BS libs 
$ android-support-v4jar 
š) cordova-2.9.0jar 


图 8.3 创建 目录 


© 单 击 项 目 右键 属性 一 Java Build Path—> Libraries—> Add Jars, 如 图 8.4 和 图 8. 5 
所 示 。 


type filter text Java Build Path 


b Resource PR 
Android [E Source [Bprojects] Bà Libraries | ç Order and Export 
Android Lint Preferences | | JARs and class folders on the build path: 
Builders b mÀ Android 4.0 
Java Build Path b mÀ Android Dependencies 

b Java Code Style b mÀ Android Private Libraries 

b Java Compiler 

b Java Editor 
Javadoc Location 
Project References 
Refactoring History 
Run/Debug Settings 
Task Tags 
XML Syntax 


Remove 


Migrate JAR File... 


8.4 加 入 PhoneGap 包 


© 把 解压 出 来 的 android 目录 下 的 xml 目录 放 到 /res 目录 下 ,如 图 8. 6 所 示 。 


PhoneGap 应 用 


It co $ 


移动 Web FERR 


Choose the archives to be added to the build path: 


[type filter tet 
< (Ë HelloAndroid 
b © assets 

b © bn 


b @ gen 
4 © libs 
国 android-support-v4jar 


因 project 
E AndroidManifestxml 
IB ic launcher-web.png 
Ë) proguard-projecttxt 
project.properties 

b GŠ LenovoEnvServer 


国 .dasspath = a ë> res 


> © drawable-hdpi 

© drawable-Idpi 
> © drawable-mdpi 
» © drawable-xhdpi 
» © drawable-xxhdpi 
b @ layout 
» © values 
> © values-v11 
> © values-v14 
4 @ xml 

B) confgxml 


图 8.5 加 入 PhoneGap 包 8.6 


(6) 开始 开发 ,可 以 参考 自 带 的 例子 。 
D 首先 把 activity 类 进行 修改 。 


public class HelloPhoneGap extends DroidGap { 
/ xx Called when the activity is first created. */ 
@Override 
public void onCreate(Bundle savedInstanceState) 
{ 
super. onCreate( savedInstanceState); 
// 加 载 assets/www 目录 下 的 index. html 


xml 目录 放 到 /res 目录 下 


super. loadUr1("file: ///android_asset/www/ index. html" ) ; 


© 创建 index. html, 编 辑 assets/www/index. html, 


<! DOCTYPE HTML > 
<head> 
<title> 你 好 ,PhoneGap </title > 


< script type = "text/javascript" charset = "utf — 8" src = "cordova 一 2.9.0.js"> 


</script > 
</head> 
<body> 
< hl > 你 好 ,PhoneGap </h1 > 
</body> 
</html> 


© 修改 AndroidManifest. xml, 增 加 权限 设置 。 


< supports - screens android: largeScreens = "true" 


android:normalScreens = "true" 
android: sma11Screens = "true" 
android:resizeable = "true" 
android:anyDensity = "true" /> 


< uses - permission android:name = "android. permission. 
"android. permission. 


< uses — permission android:name 
< uses - permission android: nam 


< uses - permission android:name 
< uses - permission android:name 
< uses - permission android:name 
< uses - permission android:name 
< uses - permission android:name = 
< uses - permission android:name 

< uses - permission android: nam 
< uses - permission android:name 
< uses - permission android:name 
< uses - permission android:name 
< uses - permission android:name 
< uses - permission android:name = 


< uses - feature androi 


"android. permission. 
"android. permission. 
"android. permission. 
"android. permission. 
"android. permission. 
"android. permission. 
"android. permission. 
"android. permission. 
"android. permission. 
"android. permission. 
"android. permission. 
"android. permission. 
"android. permission. 
< uses - permission android:name = "android. permission. 
:name = "android. hardware. camera" /> 


. CAMERA" /> 
VIBRATE" /> 


ACCESS_FINE_LOCATION" /> 


INTERNET" /> 

RECEIVE_SMS" /> 
RECORD_AUDIO" /> 
RECORD_VIDEO"/> 


READ_CONTACTS" /> 
WRITE_CONTACTS" /> 


ACCESS_NETWORK_STATE" /> 
GET_ACCOUNTS" /> 
BROADCAST_STICKY" /> 


< uses - feature android:name = "android. hardware. camera. autofocus" /> 


(7) 运行 程序 。 
O 创建 模拟 设备 ,如 图 8.7 所 示 。 
@ 运行 ,如 图 8.8 所 示 。 


[E edit Angroid Virtual Device (AVD) k= | 
AVD Name: AVD 
| 
Target Android 40 - API Level 14 - 
CPU/ABI: ARM (armeabi-v7a) - 
Keyboard: Hardware keyboard present 
Front Camera: None 
some 
Memory Options: 


RAM: 512 


VM Heap: 


Internal Storage: — 200 


SD Card: 


32 


图 8.7 创建 模拟 设备 


hello, PhoneGap 


图 8.8 程序 运行 


ACCESS_COARSE_LOCATION" /> 


ACCESS_LOCATION_EXTRA_COMMANDS" /> 


MODIFY AUDIO SETTINGS" /> 


WRITE_EXTERNAL_ STORAGE" /> 
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8.2 Acceleration 


Accelerometer 主要 作用 是 采集 设备 在 x、y、z 方 向 上 的 动作 。 也 就 是 返回 在 z+、y、x 方 
向 上 的 加 速 ,支持 的 平台 : Android. BlackBerry WebWorks (OS 5. 0 或 更 高 版 本 )、iOS。 
Accelerometer 实现 这 个 功能 有 以 下 三 个 方法 : 

(1) accelerometer. getCurrentAcceleration 

获取 其 在 +yz 方向 的 加 速度 。 

(2) accelerometer. watchAcceleration 

对 比 第 (1) 个 方法 ,这 个 可 以 每 隔 一 段 时 间 获 取 一 次 zyx 方向 的 加 速度 。 

(3) accelerometer. clearWatch 

停止 对 第 (2) 个 方法 定义 的 加 速 器 的 监视 。 

下 面 给 出 一 段 示 例 代码 : 


<html> 
< head> 
<title> Acceleration Example </title> 
< script type = "text/javascript" charset = "utf - 8" src = "PhoneGap. js"></script > 
< script type = "text/javascript" charset = "utf - 8"> 
// 等 待 加 载 PhoneGap 
document. addEventListener("deviceready", onDeviceReady, false); 
//PhoneGap 加 载 完 毕 
function onDeviceReady() { 
navigator. accelerometer. getCurrentAcceleration(onSuccess, onError); 
j 
//onSuccess: 返回 当前 加 速度 数据 的 快照 
function onSuccess(acceleration) { 
alert( 'Acceleration X: ' + acceleration.x + '\n' + 
'Acceleration Y: ' + acceleration.y + '\n' + 
'Rcceleration Z: ' + acceleration.z + '\n' + 
'Timestamp: ' + acceleration. timestamp + 'VWn'); 


i 


//onError: 返回 加 速度 数据 失败 
function onError() { 
alert( 'onError! ') ; 
) 
</script> 
</head> 
< body> 
< hl > Example </h1 > 
< p> getCurrentAcceleration </p> 
</body> 
</html> 


8.3 Camera 


当 使 用 设备 的 摄像 头 采 集 照 片 的 时 候 ,Camera 对 象 提供 对 设备 默认 摄像 头 应 用 程序 的 
访问 。 它 支持 的 平台 有 : Android, BlackBerry WebWorks(OS 5. 0 或 更 高 版 本 ) iOS, ¿E 
要 的 参数 和 方法 如 下 。 

(1) 参数 

。 cameraSuccess 一 一 提供 图 像 数 据 的 onSuccess 回调 函数 。 

。 cameraError 一 一 提供 错误 信息 的 onError 回调 函数 。 

。 cameraOptions 一 一 定制 摄像 头 设置 的 可 选 参 数 , 它 主要 有 以 下 参数 : 

名 quality: 存储 图 像 的 质量 ,范围 是 [0,100]。 

名 destinationType: 选择 返回 数据 的 格式 。 

如 sourceType: 设 定 图 片 来 源 。 

ZallowEdit; 在 选择 图 片 进行 操作 之 前 允许 对 其 进行 简单 编辑 (只 有 iOS 支持 ) 。 
如 encodingType: 选择 返回 图 像 文件 的 编码 方式 。 

Ztarget Width: 以 像素 为 单位 的 图 像 缩 放宽 度 指 定 图 片 展示 的 时 候 的 宽度 。 

名 targetHeight: 以 像素 为 单位 的 图 像 缩放 高 度 指 定 图 片 展示 的 时 候 的 高 度 。 

名 saveToPhotoAlbum: 拍 完 照片 后 是 否 将 图 像 保存 在 设备 上 的 相册 中 。 

æ mediaType: 设置 选择 媒体 的 类 型 。 

如 cameraDirection: 选择 前 置 摄像 头 还 是 后 置 摄像 头 。 

(2) 方法 

e camera. getPicture。 

该 方法 会 打开 设备 的 默认 摄像 头 应 用 程序 ,使 用 户 可 以 拍照 (如 果 Camera. sourceType 
设置 为 Camera. PictureSourceType. CAMERA ,这 也 是 默认 值 )。 拍 照 结 束 后 ,摄像 头 应 用 
程序 会 关闭 并 恢复 用 户 的 应 用 程序 。 

如 果 Camera. sourceType = Camera. PictureSourceType. PHOTOLIBRARY ,或 者 是 
Camera. sourceType = Camera. PictureSourceType. SAVEDPHOTOALBUM ,系统 弹出 照 
片 选择 对 话 框 ,用 户 可 以 从 相 集 中 选择 照片 。 返 回 值 会 按照 用 户 通过 cameraOptions 参数 
所 设 定 的 下 列 格式 之 一 发 送 给 cameraSuccess 回调 函数 : 

扎 一 个 字符 串 ,包含 Base64 编码 的 照片 图 像 ( 默 认 情况 ) 。 
名 一 个 字符 串 ,表示 在 本 地 存储 的 图 像 文件 位 置 。 
该 方法 简单 的 范例 如 下 : 


navigator. camera. getPicture(cameraSuccess, cameraError, [cameraOptions]); 


。 camera. cleanup: 清空 使 用 摄像 头 拍照 时 候 产生 的 缓存 文件 。 
当 使 用 如 下 参数 的 时 候 会 产生 临时 文件 ,这 时 候 使 用 这 个 方法 会 及 时 清除 临时 文件 。 
使 用 方法 如 下 : 


navigator. camera. c1eanup( cameraSuccess, cameraError); 
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这 个 方法 的 回调 方法 中 没有 参数 ,只 是 去 调用 对 应 的 方法 ,可 以 在 对 应 的 方法 中 判断 是 
否 清空 了 。 
再 看 下 面 一 个 简单 的 例子 : 


<! DOCTYPE html > 

<html> 

< head> 

<title> Capture Photo </title> 

< script type = "text/javascript" charset = "utf — 8" src= "js/cordova— 2. 6. 0. js"> 


</script> 
< script type = "text/javascript" charset = "utf - 8"> 
var pictureSource; // 设 定 图 片 来 源 


var destinationType; // 选 择 返回 数据 的 格式 
document. addEventListener("deviceready", onDeviceReady, false); 


function onDeviceReady( ){ 
pictureSource = navigator. camera. PictureSourceType; 
destinationType = navigator. camera. DestinationType; 


) 


function onPhotoDataSuccess( imageData) ( 
//base64 encoded image data 
var smallImage = document. getElementById("smallImage"); 
smallImage. style. display = "block"; 
// 在 使 用 base64 编码 的 时 候 需要 使 用 这 样 的 前 级 
smallImage. src = "data:image/jpeg;base64," + imageData; 
J: 


//Called when a photo is successfully retrieved 
function onPhotoURISuccess( imageURI) { 
//image file URI 
var largeImage = document.getElementById("largeImage"); 
largeImage. style. display = "block"; 
// 使 用 image file URI 直接 赋值 就 可 以 了 
largeImage. src = imageURI; 
} 


// 第 一 个 按钮 调用 函数 
function capturePhoto() { 
navigator. camera. getPicture( onPhotoDataSuccess, onFail, { quality: 50, 
destinationType: destinationType. DATA_URL }); 
} 


// 第 二 个 按钮 调用 的 函数 
function capturePhotoEdit() { 
navigator. camera. getPicture( onPhotoDataSuccess, onFai1, (quality: 20, allowEdit: true, 
destinationType: destinationType. DATA_URL )); 
) 


// 第 三 /四 个 按钮 调用 的 函数 
function getPhoto( source) { 
//Retrieve image file location from specified source 


navigator. camera. getPicture( onPhotoURISuccess, onFail, ( quality: 50, 
destinationType: destinationType. FILE URI, 
sourceType: source }); 


} 


function onFail(message) { 
alert("Failed because: " + message); 
} 


</script> 
</head> 
<body> 
< button onclick = "capturePhoto( ) ;"> Capture Photo </button> < br > 
< button onclick = "capturePhotoEdit( ) ;"> Capture Editable Photo </button > < br > 
< button onclick = "getPhoto(pictureSource. PHOTOLIBRARY) ; "> 
From Photo Library 
</button><br> 
< button onclick = "getPhoto(pictureSource. SAVEDPHOTOALBUM) ; "> 
From Photo Album 
</button><br> 
< img style = "display:none;width:60px;height:60px;" id= "smallImage" src= "" /> 
< img style = "display:none;" id= "largeImage" src= "" /> 
</body> 
</html > 


8.4 capture. captureAudio 


Capture 主要 是 提供 对 设备 音频 .图 像 和 视频 采集 功能 的 访问 。 其 中 capture. capture 
Audio 方法 是 对 音频 设备 的 访问 ,也 就 是 指 录音 功能 。capture. captureAudio 方法 启动 录音 
机 应 用 程序 并 返回 采集 的 音频 剪辑 文件 。 该 方法 通过 设备 默认 的 音频 录制 应 用 程序 开始 一 
个 异步 操作 以 采集 音频 录制 。 该 操作 允许 设备 用 户 在 一 个 会 话 中 同时 采集 多 个 录音 。 当 用 
户 退 出 音频 录制 应 用 程序 ,或 系统 到 达 CaptureAudioOptions 的 limit 参数 所 定义 的 最 大 录 
制 数 时 都 会 停止 采集 操作 。 如 果 没 有 设置 limit 参数 的 值 , 则 使 用 其 默认 值 1, 也 就 是 说 当 
用 户 录 制 好 一 个 音频 剪辑 后 采集 操作 就 会 终止 。 

当 采 集 操作 结束 后 ,系统 会 调用 CaptureCB 回调 函数 ,传递 一 个 包含 所 有 采集 到 的 音 
频 剪辑 文件 的 MediaFile 对 象 数组 。 如 果 用 户 在 完成 一 个 音频 剪辑 采集 之 前 终止 采集 操 
作 , 系 统 会 调用 CaptureErrorCB 回调 函数 .并 传递 一 个 包含 CaptureError. CAPTURE_ 
NO_MEDIA_FILES 错误 代码 的 CaptureError 对 象 。 

简单 例子 代码 如 下 : 


<! DOCTYPE html > 
<html> 
< head> 
< title> capture. captureAudio </title> 
< script type = "text/javascript" charset = "utf - 8" src = "js/cordova- 2.6.0.js"> 
</script> 
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< script type = "text/javascript" charset = "utf - 8"> 
//captureAudio 方法 成 功 执行 后 回调 函数 
function captureSuccess(mediaFiles) { 
var i, len; 
for (i = 0, len = mediaFiles. length; i< len; i += 1) { 
// 3 238 
navigator. notification. alert(mediaFiles[ i]. fullPath + " " +mediaFiles[i].name); 


$ 
//captureAudio 方法 执行 失败 后 回调 函数 


function captureError(error) { 
var msg = "capture 发 生 错误 : " + error. code; 
navigator. notification.alert(msg, null, "oh!"); 
} 


function captureAudio() { 
//limit 录制 的 音频 数 
navigator. device. capture. captureAudio( captureSuccess, captureError, 
(limit: 1)); 

Ë 


</script > 
</head> 
<body> 
< h1 > capture. captureAudio </h1 >< br/> 
< button onclick = "captureAudio( ) ; "> Capture Audio </button> < br > 
</body> 
</html > 


按钮 单 击 后 的 效果 如 图 8. 9 所 示 。 


音 结 束 后 如 图 8.10 所 示 。 


图 8.10 录音 结束 


8.5 capture. capturelmage 


capture. capturelmage 方法 开启 摄像 头 应 用 程序 ,返回 采集 到 的 图 像 文 件 信息 。 该 方 
法 通过 设备 的 摄像 头 应 用 程序 开始 一 个 异步 操作 以 采集 图 像 。 该 操作 允许 设备 用 户 在 一 个 
会 话 中 同时 采集 多 个 图 像 。 

当 用 户 退 出 摄像 头 应 用 程序 ,或 系统 到 达 CaptureImageOptions 的 limit 参数 所 定义 的 
最 大 图 像 数 时 都 会 停止 采集 操作 。 如 果 没 有 设置 limit 参数 的 值 , 则 使 用 其 默认 值 1, 也 就 
是 当 用 户 采集 到 一 个 图 像 后 采集 操作 就 会 终止 。 

当 采 集 操 作 结 束 后 ,系统 会 调用 CaptureCB 回调 函数 ,传递 一 个 包含 每 个 采集 到 的 图 
像 文件 的 MediaFile 对 象 数组 。 如 果 用 户 在 完成 一 个 图 像 采 集 之 前 终止 采集 操作 ,系统 会 
调用 CaptureErrorCB 回调 函数 ,并 传递 一 个 包含 CaptureError. CAPTURE_NO_MEDIA_ 
FILES 错误 代码 的 CaptureError 对 象 。 

以 下 是 示例 代码 。 


<! DOCTYPE html > 
<html> 
< head> 
< title> capture. captureAudio </title> 
< script type = "text/javascript" charset = "utf - 8" 
src = "js/cordova - 2. 6. 0. js"> 
</script> 
< script type = "text/javascript" charset = "utf - 8"> 
//captureAudio 方 法 成 功 执行 后 回调 函数 
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function captureSuccess(mediaFiles) { 
var i, len; 
for (i = 0, len = mediaFiles. length; i< len; i += 1) { 
// 业 务 逻 辑 
navigator. notification. alert(mediaFiles[ i]. fullPath + mediaFiles[i]. name); 
} 
} 
//captureAudio 方法 执行 失败 后 回调 函数 
function captureError(error) { 
var msg = "capture 发 生 错误 : " + error. code; 
navigator. notification.alert(msg, null, "oh"); 


function captureImage() { 
//limit 拍照 的 张 数 
navigator. device. capture. captureImage( captureSuccess, captureError, 
{limit:2}); 
</script > 
</head> 
<body> 
< h1 > capture. captureImage </h1 >< br/> 
< button onclick = "captureImage( ) ; "> Capture Audio </button > < br > 
</body> 
</html > 


运行 后 如 图 8.11 所 示 。 


capture.capturelmage 


Capture Audio 


图 8.11 采集 图 像 程 序 运行 


拍照 完成 后 ,弹出 文件 地 址 和 名 称 , 会 弹出 两 次 ,因为 设置 了 拍摄 两 张 照片 ,如 图 8. 12 
所 示 。 


8.12 拍照 完成 


8.6 capture. captureVideo 


capture, captureVideo 方法 开启 视频 录制 应 用 程序 ,返回 采集 到 的 视频 剪辑 文件 信息 。 
该 方法 通过 设备 的 视频 录制 应 用 程序 开始 一 个 异步 操作 以 采集 视频 录制 。 该 操作 允许 设备 
用 户 在 一 个 会 话 中 同时 采集 多 个 视频 录制 。 当 用 户 退 出 视频 录制 应 用 程序 ,或 系统 到 达 
CaptureVideoOptions 的 limit 参数 所 定义 的 最 大 录制 数 时 都 会 停止 采集 操作 。 如 果 没 有 设 
置 limit 参数 的 值 , 则 使 用 其 默认 值 1, 也 就 是 说 , 当 用 户 录 制 到 一 个 视频 剪辑 后 采集 操作 就 
会 终止 。 当 采集 操作 结束 后 ,系统 会 调用 CaptureCB 回调 函数 ,传递 一 个 包含 每 个 采集 到 
的 视频 剪辑 文件 的 MediaFile 对 象 数组 。 如 果 用 户 在 完成 一 个 视频 剪辑 采集 之 前 终止 采集 
操作 ,系统 会 调用 CaptureErrorCB 回调 函数 ,并 传递 一 个 包含 CaptureError. CAPTURE_ 
NO_MEDIA_FILES 错误 代码 的 CaptureError 对 象 。 下 面 给 出 一 个 例子 代码 : 


<! DOCTYPE html > 
<html> 
<head> 
<title> capture. captureAudio </title> 
< script type = "text/javascript" charset = "utf - 8" 
src = "js/cordova - 2.6.0.js"> 
</script> 
< script type = "text/javascript" charset = "utf - 8"> 
< span style = "white — space :pre"></span > 
//captureVideo 方法 成 功 执行 后 回调 函数 
function captureSuccess(mediaFiles) { 
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var i, len; 
for (i = 0, len = mediaFiles. length; i< len; i += 1) { 
// 对 应 的 逻辑 内 容 
} 
} 


//captureVideo 方法 执行 失败 后 回调 函数 
function captureError(error) { 
var msg = "An error occurred during capture: " + error.code; 


navigator.notification.alert(msg, null, "oh"); 
i 


function captureVideo() { 
navigator. device. capture. captureVideo(captureSuccess, captureError, (limit: 2}); 


} 
</script> 

</head> 

< body> 

< h1 > capture. captureImage </h1 >< br/> 

< button onclick = "captureVideo( ) ; "> Capture Video </button > < br > 

</body> 

</html> 


8.7 Compass 


Compass 对 象 获得 该 设备 的 当前 朝向 。 罗 盘 是 一 个 检测 设备 方向 或 朝向 的 传感器 ,使 
用 度 作 为 衡量 单位 , 取 值 范围 从 0" 到 359. 99"。 这 个 对 象 有 以 下 几 个 方法 : 
。 compass. getCurrentHeading(compassSuccess.compassError,compassOptions) : 获 
取 罗 盘 的 当前 朝向 。 
。 compass. watchHeading: 在 固定 的 时 间 间 隔 获取 罗盘 朝向 的 角度 。 
。 compass. clearWatch: 停止 watch ID 参数 指向 的 罗盘 监视 。 
下 面 给 出 一 段 例子 代码 : 


<!DOCTYPE html > 
<html> 
<head> 
< title> Compass Example </title> 
< script type = "text/javascript" charset = "utf - 8" 
src = "js/cordova - 2.6.0. js"></script > 
< script type = "text/javascript" charset = "utf - 8"> 
var watchID = null; 
// 等 待 Cordova 加 载 
document. addEventListener("deviceready", onDeviceReady, false); 
//Cordova 加 载 完毕 
function onDeviceReady() { 
navigator. compass. getCurrentHeading(function(heading){ 


alert("Heading: " + heading.magneticHeading); 
}, function(compassError){ 
alert("Compass Error: " + compassError. code); 
H; 
startWatch(); 
P 


// 开 始 监听 Compass 罗盘 
function startWatch() { 
// 每 隔 3 秒 获 取 一 次 Compass 数据 
/xx 
* options 选项 
* frequency: 多 少 毫秒 获取 一 次 罗盘 朝向 。( 数 字 类 型 )( 默 认 值 : 100) 
* filter: 能 够 触发 watchHeadingFilter success 回调 的 罗盘 改变 度数 (数字 类 型 ) 
* filter 在 某 些 设 备 上 不 支持 ,具体 参看 文档 
*/ 
var options = { frequency: 3000 }; 
watchID = navigator. compass. watchHeading(onSuccess, onError, options); 
} 
// 停 止 对 Compass 的 监听 
function stopWatch() { 
if (watchID) { 
navigator. compass. clearWatch(watchID) ; 
watchID = null; 
} 
} 
function onSuccess(heading) { 
var element = document. getElementById("heading"); 
element. innerHTML = "Heading: " + heading.magneticHeading; 
function onError(compassError) { 
alert("Compass error: " + compassError.code); 
j 
</script > 
</head> 
<body> 
<div id= "heading"> Waiting for heading...</div> 
< button onclick = "startWatch( ) ;"> Start Watching </button > 
< button onclick = "stopWatch( ) ;"> Stop Watching </button > 
</body> 
</html> 


8.8 Connection 


Connection 对 象 就 是 去 判断 现在 连接 的 网 络 ,在 程序 中 就 可 以 使 用 PhoneGap 的 这 个 
对 象 去 判断 当前 的 网 络 ,然后 做 出 对 应 的 行为 。 这 个 对 象 只 有 一 个 type 属性 ,可 以 取得 这 
个 type 属性 的 值 ,然后 再 判断 。type 属性 的 可 选 值 ,在 代码 中 可 以 看 到 。 下 面 给 出 一 段 例 
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子 代码 : 


<! DOCTYPE html > 
<html> 
<head> 
< title > navigator. connection. type Example </title> 
< script type = "text/javascript" charset = "utf - 8" 
src = "cordova - 2. 6. 0. js"></script > 
< script type = "text/javascript" charset = "utf - 8"> 
document. addEventListener("deviceready", onDeviceReady, false); 
function onDeviceReady() { 
checkConnection( ) ; 
) 
function checkConnection() { 
var networkState = navigator.connection. type; 
var states = {}; 


states[Connection. UNKNOWN] = "Unknown connection"; // 未 知 连接 
states[ Connection. ETHERNET] = "Ethernet connection"; // 以 太 网 
states[Connection. WIFI] = "WiFi connection"; //wifi 
states[Connection. CELL 2G] = "Cell 2G connection"; //2G 
states[ Connection. CELL 3G] = "Cell 3G connection"; //3G 
states[ Connection. CELL 4G] = "Cell 4G connection"; //4G 
states[ Connection. CELL] = "Cell generic connection"; // 蜂 窝 网 络 
states[ Connection. NONE ] = "No network connection"; 
alert("Connection type: " + states[networkState]); 
} 
</script> 
</head> 
< body> 
<p> 弹 出 一 个 alert 对 话 框 显 示 当 前 的 网 络 状态 </p> 
</body> 
</html > 


8.9 Contacts 


在 手机 中 ,程序 可 以 访问 手机 的 通讯 录 , 这 个 时 候 需要 使 用 PhoneGap 提供 的 Contacts 
对 象 。Contacts 对 象 有 以 下 几 个 方法 。 
。 create 方法 : 创建 联系 人 ,返回 一 个 Contact 对 象 。 
。 find 方法 : 查询 设备 通讯 录 数 据 库 . 并 返回 包含 指定 字段 的 一 个 或 多 个 Contact 对 
Z. find 方法 的 两 个 属性 :contactFields contactFindOptions。 
如 contactFields 一 一 contacts. find 方法 的 必 填 参数 ,该 参数 定义 了 查找 操作 返回 的 
Contact 对 象 中 应 该 包含 哪些 字段 。 
æ contactFindOptions— contacts. find 方法 的 可 选 参数 ,通过 该 参数 从 通讯 录 数 
据 库 中 筛选 联系 人 。 
。 clone; 返回 一 个 新 的 Contact 对 象 , 它 是 调用 对 象 的 深度 拷贝 ,其 id 属性 被 设 为 null, 


。 remove: 从 通讯 录 数 据 库 中 删除 联系 人 。 当 删除 不 成 功 的 时 候 , 触 发 以 ContactError 
对 象 为 参数 的 错误 处 理 回调 函数 。 

。 save; 将 一 个 新 联系 人 存储 到 通讯 录 数 据 库 ,如 果 通 讯 录 数 据 库 中 已 经 包含 与 其 ID 
相同 的 记录 , 则 更 新 该 已 有 记录 。 

Contact 对 象 有 以 下 的 属性 。 

° id: 全 局 唯一 标识 符 (DOMString 类 型 ) 。 

。 displayname: 联系 人 显示 名 称 , 适 合 向 最 终 用 户 展示 的 联系 人 名 称 (DOMString 
类 型 ) 。 

。 name: 联系 人 姓名 所 有 部 分 的 对 象 (CantactName 类 型 ) 。 

* nickname: 昵称 ,对 联系 人 的 非 正 式 称呼 (DOMString 类 型 ) 。 

。 phoneNumbers: 联系 人 所 有 联系 电话 的 数组 (ContactField[ ] 类 型 )。 

° emails: 联系 人 所 有 email 地 址 的 数组 (ContactField[ 类型)。 

addrsses: 联系 人 所 有 联系 地 址 的 数组 。(ContactAddresses[ ] 类 型 ) 

ims: 联系 人 所 有 IM 地 址 的 数组 (ContactField[ ] 类 型 )。 

° organizations: 联系 人 所 属 所 有 组 织 的 数组 (ContactOrganization[ ] 类 型 )。 

birthday: 联系 人 的 生日 (日 期 类 型 )。 

note: 联系 人 的 注释 信息 (DOMString 类 型 )。 

photos: 联系 人 所 有 照片 的 数组 (ContactField[] 类 型 ) 。 

categories: 联系 人 所 属 的 所 有 用 户 自 定义 类 别 的 数组 (ContactField[] 类 型 ) 。 

。 urls; 与 联系 人 相关 网 页 的 数组 (ContactField[] 类 型 ) 。 

下 面 写 一 个 例子 代码 : 


<! DOCTYPE html > 
<html> 
< head> 
< title> Contact Example </title> 
< script type = "text/javascript" charset = "utf - 8" 
src = "cordova - 2. 6. 0. js"></script > 
< script type = "text/javascript" charset = "utf - 8"> 
document. addEventListener("deviceready", onDeviceReady, false); 
function onDeviceReady() { 
//create 
var contact = navigator. contacts. create(); 
contact. displayName = "Plumber"; 
contact. nickname = "Plumber"; 
//specify both to support all devices 
var name = new ContactName(); 
name.givenName = "Jane"; 
name. familyName = "Doe"; 
contact. name = name; 
//save 
contact. save( onSaveSuccess, onSaveError); 
//clone 
var clone = contact. clone(); 
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clone. name. givenName = "John"; 
console. log( "Original contact name = " + contact.name.givenName); 
console. log( "Cloned contact name = " + clone.name.givenName); 
//remove 
contact. remove( onRemoveSuccess, onRemoveError ) ; 
} 
function onSaveSuccess(contact) { 
alert("Save Success"); 
: 
function onSaveError(contactError) { 
alert("save Error = " + contactError.code); 
i 
function onRemoveSuccess(contacts) ( 
alert("Removal Success"); 
} 
function onRemoveError(contactError) { 
alert("Remove Error = " + contactError.code); 
</script> 
</head> 
< body> 
< hl > Example </h1 > 
< p> Find Contacts </p> 
</body> 
</html> 


8.10 Geolocation GPS 传感器 


首先 解释 一 下 Geolocation 这 个 单词 ,英语 中 是 定位 的 意思 ,本 书 中 翻译 成 了 GPS 传 感 
器 ,主要 是 因为 在 官方 文档 中 使 用 到 了 GPS sensor, geolocation 对 象 提供 了 对 设备 GPS 传 
感 器 的 访问 。geolocation 同样 有 以 下 三 个 方法 。 

。 geolocation. getCurrentPosition: 返回 一 个 Position 对 象 表示 设备 的 当前 位 置 。 

。 geolocation. watchPosition: 定期 查询 设备 的 位 置 。 

。 geolocation. clearWatch: 配合 watchPosition () 使 用 .用 于 停止 watchPosition ( ) 

查询 。 
下 面 写 一 个 例子 代码 : 


<! DOCTYPE html > 
<html> 
<head> 

<title> Device Properties Example </title> 
< script type = "text/javascript" charset = "utf - 8" 
src = "cordova - 2. 6. 0. js"></script > 
< script type = "text/javascript" charset = "utf - 8"> 
document. addEventListener("deviceready", onDeviceReady, false); 
function onDeviceReady() { 


navigator. geolocation. getCurrentPosition(onSuccess, onError); 
} 
function onSuccess(position) { 
var element = document. getElementById("geolocation"); 
element. innerHTML = "Latitude 纬度 :" + position. coords. latitude 
+ "<br />" + "Longitude 经 度 : ”+ position. coords. longitude+ "<br />" + 
"Altitude 位 置 相对 于 椭圆 球面 的 高 度 :" + position. coords. altitude 
+ "<br />" + "Accuracy 以 米 为 单位 的 纬度 和 经 度 坐 标的 精度 水 平 :" 
+ position.coords.accuracy+ "<br />" + 
"Altitude Accuracy 以 米 为 单位 的 高 度 坐 标的 精度 水 平 :”+ position. coords. 
altitudeAccuracy + "<br />" + 
"Heading 运动 的 方向 , 通过 相对 正 北 做 顺 时 针 旋 转 的 角度 指定 : ”+ position. coords, 
heading + "<br />"+ 
"Speed 以 米 / 秒 为 单位 的 设备 当前 地 面 速度 : "+ position. coords. speed 
+ "<br />" + "Timestamp 以 毫秒 为 单位 的 coords 的 创建 时 间 惟 : "+ 
position. timestamp + "< br />"; 
) 


function onError(error) ( 
alert("code: " + error.code+ "Nn" + "message: " + error.message + "\n"); 


) 
</script> 
</head> 
< body> 
<p id= "geolocation"> Finding geolocation...</p> 
</body> 
</html> 


8.11 InAppBrowser 


InAppBrowser 对 象 是 当 用 户 调用 window. open 的 时 候 , 显 示 一 个 浏览 器 。 在 做 项 目 
的 过 程 中 客户 需要 在 应 用 中 打开 另 一 个 网 站 ,这 时 候 就 可 以 直接 使 用 这 个 对 象 ,在 应 用 程序 
中 打开 一 个 浏览 器 。window. open 方法 会 返回 此 对 象 。 此 对 象 有 以 下 三 个 方法 。 

。 addEventListener: 增加 事件 监听 器 。 

。 removeEventListener: 移 除 事件 监听 器 。 

° close; 关闭 对 象 。 

这 三 个 方法 比较 直观 ,下 面 介绍 一 下 可 以 添加 的 事件 。 

。 Loadstart: InAppBrowser 开始 加 载 网 页 时 候 触 发 。 

。 Loadstop: InAppBrowser 网 页 加 载 完 成 触发 。 

。 Loaderror: InAppBrowser 加 载 网 页 出 错 的 时 候 触 发 。 

。 Exit: InAppBrowser 窗口 关闭 的 时 候 触 发 。 

下 面 看 一 个 例子 代码 : 


<! DOCTYPE html > 
<html> 


PhoneGap 应 用 


Y co $ 


移动 Web FERR 


<head> 
< title > InAppBrowser. removeEventListener Example </title> 
< script type = "text/javascript" charset = "utf - 8" 
src = "cordova - 2. 6. 0. js"></script > 
< script type = "text/javascript" charset = "utf - 8"> 
document. addEventListener("deviceready", onDeviceReady, false); 
//Global InAppBrowser reference 
var iabRef = null; 
function iabLoadStart(event) { 
alert(event.type + "-" + event.url); 


function iabLoadStop( event) { 
alert(event.type + "-" + event.url); 


function iabLoadError(event) { 
alert(event.type + "一 ”+ event. message); 


function iabClose(event) { 
alert(event. type); 
iabRef.removeEventListener("loadstart", iabLoadStart); 
iabRef. removeEventListener("loadstop", iabLoadStop); 
iabRef. removeEventListener("loaderror", iabLoadError); 
iabRef. removeEventListener("exit", iabClose); 


function onDeviceReady() { 
iabRef = window.open("http://www.baidu.com", "_blank", "location = yes"); 
iabRef.addEventListener("loadstart", iabLoadStart); 
iabRef.addEventListener("loadstop", iabLoadStop); 
iabRef. removeEventListener("loaderror", iabLoadError); 
iabRef.addEventListener("exit", iabClose); 

J: 


</script > 
</head> 
<body> 
</body> 
</html> 


8.12 Notification 


Notification 对 象 主要 是 通知 的 功能 ,这 个 对 象 提供 警告 确定 、 提 示 、 鸣 叫 和 振动 5 种 
通知 ,也 就 对 应 于 下 面 5 个 方法 。 
。 notification. alert: 显示 一 个 定制 的 警告 或 对 话 框 ,格式 如 下 : 


navigator. notification. alert(message, alertCallback, [title], [buttonName]); 


gmessage: 对 话 框 信息 。( 字 符 串 类 型 ) 
如 alertCallback: 当 警告 对 话 框 被 忽略 时 调用 的 回调 函数 。 (函数 类 型 ) 
g title: 对 话 框 标题 。( 字 符 串 类 型 )( 可 选项 ,默认 值 为 "Alert”) 
名 buttonName: 按钮 名 称 。( 字 符 串 类 型 )( 可 选项 ,默认 值 为 “OK”) 
。 notification. confirm: 显示 一 个 可 定制 的 确认 对 话 框 ,格式 如 下 : 


navigator. notification. confirm(message, confirmCallback, [title], [buttonLabels]) 


gmessage: 对 话 框 信息 。( 字 符 串 类 型 ) 
如 confirmCallback: 按 下 按钮 后 触发 的 回调 函数 ,返回 按 下 按钮 的 索引 (1、2 或 3)。 
(函数 类 型 ) 
如 title: 对 话 框 标题 。( 字 符 串 类 型 )( 可 选项 ,默认 值 为 "Confirm”) 
名 buttonLabels: 逗号 分 隔 的 按钮 标签 字符 串 。( 字 符 串 类 型 )( 可 选项 ,默认 值 为 
“OK ,Cancel”) 
° notification. prompt: 显示 一 个 定制 的 提示 对 话 框 ,格式 如 下 : 


navigator. notification. prompt (message, promptCallback, [title], [buttonLabels]) 


gmessage: 对 话 框 信息 。( 字 符 串 类 型 ) 
如 promptCallback: 按 下 按钮 后 触发 的 回调 函数 。( 函 数 类 型 ) 
名 title: 对 话 框 标题 。( 字 符 串 类 型 )( 可 选项 ,默认 值 为 “Prompt”) 
名 buttonLabels: 显示 按钮 标签 字符 串 的 数组 。(Array) (可 选项 ,默认 值 为 ["OK"， 
"Cancel" ]) 
e notification. beep: 设备 将 发 出 蜂 鸣 声 , 格 式 如 下 : 


navigator. notification. beep(times); 


名 times: 蜂 鸣 声 的 重复 次 数 。( 数 字 类 型 ) 
。 notification. vibrate: 使 设备 震动 指定 的 时 长 ,格式 如 下 : 


navigator. notification. vibrate(milliseconds); 
atime: 以 毫秒 为 单位 的 设备 震动 时 长 ,1000 毫秒 为 1 秒 。( 数 字 类 型 ) 
小 结 
在 本 章 中 , 主要 详细 介绍 了 如 何 搭建 PhoneGap 开发 环境 ,以 及 Accelerometer、 


Camera.Capture, Compass. Connection, Contacts, Geolocation.InAppBrowser, Notification 


等 特性 ,通过 本 章 的 学 习 , 读 者 可 以 利用 PhoneGap 去 开发 跨 平台 的 移动 应 用 程序 。 
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教学 资源 支持 


敬爱 的 教师 : 
感谢 您 一 直 以 来 对 清华 版 计算 机 教材 的 支持 和 爱护 。 为 了 配合 本 课程 的 


教学 
版 社 主页 (http://www.tup. com. cn) 上 查询 和 下 载 ,也 可 以 拨打 电话 或 发 送 电 


需要 ,本 教材 配 有 配套 的 电子 教案 (素材 ) ,有 需求 的 教师 请 到 清华 大 学 


子 邮 件 咨 询 。 
如 果 您 在 使 用 本 教材 的 过 程 中 遇 到 了 什么 问题 ,或 者 有 相关 教材 出 版 计 
划 , 也 请 您 发 邮件 告诉 我 们 ,以 便 我 们 更 好 地 为 您 服务 。 


我 们 的 联系 方式 : 

地 址 ; 北京 海淀 区 双 清 路 学 研 大 厦 A Æ 707 
AB 编 : 100084 

$ ” 话 : 010 一 62770175 一 4604 


课件 下 载 : http://www. tup. com. cn 


电子 邮件 : weijj@tup. tsinghua. edu. cn 


要 一 扫 
教师 交流 QQ 群 : 136490705 课件 下 载 . 样 书 申请 
教材 推荐 、 技 术 交 流 


教师 服务 微 信 : itbook8 

教师 服务 QQ: 883604 

(申请 加 入 时 ,请 写 明 您 的 学 校 名 称 和 姓名 ) 

用 微 信 扫 一 扫 右 边 的 二 维 码 , 即 可 关注 计算 机 教材 公众 号 。 
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